六、动画 - 旋转的应用例子，时钟

最新推荐文章于 2025-06-02 09:40:24 发布

gaoya7305

最新推荐文章于 2025-06-02 09:40:24 发布

阅读量140

点赞数

分类专栏： html+css 文章标签：前端

本文链接：https://blog.youkuaiyun.com/gaoya7305/article/details/131409682

版权

html+css 专栏收录该内容

22 篇文章

订阅专栏

目录：
1.前期准备知识
2.实操 - 做时钟
3.完整代码

一、前期准备知识

因为旋转都是默认元素中心来旋转，所以，我们可以通过父元素包裹子元素。

通过父元素旋转，然后父带动子元素，到时候可以通过影藏父元素的背景颜色，这样看起来就像子元素在旋转。

<style>

*{
  margin:0;
  padding:0;
}

.sec-wrapper{
  width: 300px;
  height: 300px;
  margin: 100px;
  /* 通过父类的方框来旋转，带动里面子类sec的旋转，就可以模拟时钟针的旋转 */
  animation:run 60s;
  background-color: silver;
}

.sec{
  width: 10px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}


@keyframes run{
  from{
    transform: rotate(0);
  }

  to{
    transform: rotateZ(360deg);
  }
}
</style>

<body>
  <div class="sec-wrapper">
    <div class="sec">
    </div>
  </div>
</body>

在这里插入图片描述

二、实操 - 做时钟

1.先做表盘，和对应的秒针

  <style>
/* 1.设置原型表盘 */
    .clock{
      width: 400px;
      height: 400px;
      background-color: silver;
      margin: 0 auto;
      margin-top: 100px;
      border-radius: 50%;

      position: relative;
    }

    /* 2.clock下面所有子元素div 都居中.
    通过子绝父相，让所有的子元素相对于父类进行居中
    */
    .clock > div{
      position:absolute;

      /* 居中 */
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin: auto;
    
    }
  /*3.设置秒针 */
     .sec-wrapper{
      width: 90%;
      height: 90%;
      /* 流畅的转一圈 */
      /* animation:run 60s; */
      /* 如果想让他一步步，停顿走一格这种节奏用steps 
      
      测试的话：10s- 一圈 - 表示一分钟![请添加图片描述](https://img-blog.csdnimg.cn/019f80fd6ae546dfbc8dce37b82c285b.png)

      正常是60s 写
      */
 	/*5.使用动画 */
      animation:run 10s steps(60) infinite;
    }
    .sec{
      width: 2px;
      height: 50%;
      background-color: red;
      margin: 0 auto;
    }

  /* 4.设置旋转动画 */
    @keyframes run {
      from{
        transform:rotate(0)
      }
      to{
        transform: rotateZ(360deg);
      }
    }
  </style>

<body>
  <!-- 表盘 -->
  <div class="clock">
    <!-- 秒针-->
     <div class="sec-wrapper">
      <div class="sec"></div>
    </div>
  </div>
</body>

2.当秒针设置好后，时针和分钟就依次复制秒针的样式，然后做一些修改，他们代码如下：


/* 时钟 */
    .hour-wrapper{
      width: 70%;
      height: 70%;
      /* 10s * 60 * 12 
      时钟一直都在动，只不过很微小，所以不能用steps，而是用linear
      */
      animation:run 7200s linear infinite;
    }
    .hour{
      width: 6px;
      height: 50%;
      background-color: black;
      margin: 0 auto;
     
    }

    /* 分钟 */
    .min-wrapper{
      width: 80%;
      height: 80%;
      /* 60 * 10s */
      animation:run 600s steps(60) infinite;
    }
    .min{
      width: 4px;
      height: 50%;
      background-color: black;
      margin: 0 auto;
    }


  <!-- 时钟 -->
    <div class="hour-wrapper">
      <div class="hour"></div>
    </div>

     <!-- 分针-->
    <div class="min-wrapper">
      <div class="min"></div>
    </div>

3.如果此时我们想给表盘设置背景图片，直接给表盘元素设置background-image，但是很多时候给的图片可能过大，超过了我们的宽高，这时候可以用background-size: cover;来调整。

 /* 1.设置原型表盘 */
    .clock{
      width: 400px;
      height: 400px;
      background-color: silver;
      margin: 0 auto;
      margin-top: 100px;
      border-radius: 50%;
      position: relative;

      /* 背景图片太大，设置下bgsize:cover 铺满 */
      /* background-image: url(./11/bg.png); */
      background-image: url(./11/bg3.jpg);
      background-size: cover;
    }

三、完整代码

<style>
    .clock{
      width: 400px;
      height: 400px;
      margin: 0 auto;
      margin-top: 100px;
      border-radius: 50%;
      position:relative;
      /* 背景图片太大，设置下bgsize:cover 铺满 */
      /* background-image: url(./11/bg.png); */
      background-image: url(./11/bg3.jpg);
      background-size: cover;
    }
    /* clock下面所有子元素div 都居中 */
    .clock > div{
      position:absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin:auto;
    }

    /* 时钟 */
    .hour-wrapper{
      width: 70%;
      height: 70%;
      /* 10s * 60 * 12 
      时钟一直都在动，只不过很微小，所以不能用steps，而是用linear
      */
      animation:run 7200s linear infinite;
    }
    .hour{
      width: 6px;
      height: 50%;
      background-color: black;
      margin: 0 auto;
     
    }

    /* 分钟 */
    .min-wrapper{
      width: 80%;
      height: 80%;
      /* 60 * 10s */
      animation:run 600s steps(60) infinite;
    }
    .min{
      width: 4px;
      height: 50%;
      background-color: black;
      margin: 0 auto;
    }

     /* 秒 */
     .sec-wrapper{
      width: 90%;
      height: 90%;
      /* 流畅的转一圈 */
      /* animation:run 60s; */
      /* 如果想让他一步步，停顿走一格这种节奏用steps 
      
      测试的话：10s- 一圈 - 表示一分钟
      正常是60s 写
      */
      animation:run 10s steps(60) infinite;
    }
    .sec{
      width: 2px;
      height: 50%;
      background-color: red;
      margin: 0 auto;
    }

    @keyframes run {
        from{
          transform:rotate(0)
        }
        to{
          transform: rotateZ(360deg);
        }
    }

  </style>

<body>
  <div class="clock">
    <!-- 时钟 -->
    <div class="hour-wrapper">
      <div class="hour"></div>
    </div>

     <!-- 分针-->
    <div class="min-wrapper">
      <div class="min"></div>
    </div>

     <!-- 秒针-->
     <div class="sec-wrapper">
      <div class="sec"></div>
    </div>


  </div>

在这里插入图片描述