简单钟表动画

目录

需求

思路分析和代码实现

实现效果

---

需求

经过三四天的奋战，做的需求都提测了，现在小歇一下。写个钟表CSS动画玩玩。

没有素材，所以做出来的都是示意。如果需要，可以添加个钟表的背景图片。此外，由于思路类似，我只做了时针和秒针。

思路分析和代码实现

其实要实现这个很简单。放一个div作为容器，类名是container，并为它开启相对定位。以秒针为例，在container中放一个容器second，作为秒针的容器。再在second中放置一个pointer，作为真正的秒针。

这个地方我是这样设计的：second作为一个正方形容器，在container中居中显示；pointer作为一个细长的指针，居于正方形的上半部分的正中间，这样，指针的顶端就是正方形的上边界，指针的底端就是正方形的及核心。这样，使用动画旋转的时候，可以以正方形的中心去旋转second，而旋转的中心就是指针的底端！

我觉得这样可以抛弃直接旋转指针的思路。其实，直接旋转指针也是可以的，只是要把旋转的中心改成指针的底端，效果一样的。

这样一来，定义了keyframes，在秒针和时针上设置不同的用时，就可以了。

有了思路，直接写代码：

html部分

  <div class="container">
    <div class="hour">
      <div class="pointer">div>
    div>
    <div class="second">
      <div class="pointer">div>
    div>
  div>

css部分

    * {
      margin: 0;
      padding: 0;
    }
 
    .container {
      width: 300px;
      height: 300px;
      background-color: antiquewhite;
      border-radius: 50%;
      margin: auto;
      margin-top: 200px;
      position: relative;
    }
 
    .hour,.second {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
 
    .hour{
      width: 200px;
      height: 200px;
      animation: pointerAnimation 3600s linear infinite normal both;
    }
 
    .second{
      width: 300px;
      height: 300px;
      animation: pointerAnimation 60s linear infinite normal both;
    }
 
    .hour .pointer{
      width: 2px;
      height: 100px;
      background-color: white;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
 
    .second .pointer{
      width: 2px;
      height: 150px;
      background-color: yellow;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
 
    @keyframes pointerAnimation{
      from{
        transform: rotateZ(0);
      }
 
      to{
        transform: rotateZ(360deg);
      }
    }

实现效果

效果过于简单，我就不放动图了。。。甚至都没什么好总结的哈哈哈。

提示文章质量不佳！