用 CSS 实现秒针旋转

来自：klh2333 的 github

问题

用 CSS 实现秒针旋转。

分析

首先，这个问题需要我们读懂这些 API：animation、@keyframes、transform-origin、rotate

首先要解决的是关于时钟框框和针的布局问题，我选择了下面的布局：

有了这个布局以后，就可以很清楚的知道我想选什么当作钟的框框，选什么当作钟的秒针，以及钟的秒针的旋转点在哪里：

1. 用 border-radius 能够让框框变圆；
2. 让粉红色的 div 的宽度变成 2px，就能呈现出一条针的样子，而且看上去很像只保留了左边这条边；
3. 利用 transform-origin，将针的旋转点固定在 div 的左下角的位置；
4. 利用 @keyframes 来定义旋转动画，在 0% 的时候旋转 0°，在 100% 的时候旋转 360°，并且通过 animation-iteration-count: infinite 让动画一直运行下去，这样秒针就会一直在转了。

代码

完整的代码可以看：这里

运行结果如下所示：

/* 镜框 */
.clock-frame {
  /* 外观 */
  height: 200px;
  width: 200px;
  background-color: rebeccapurple;
  border-radius: 100px;

  /* 定位 */
  position: relative;
}

/* 秒针 */
.second-hand {
  /* 外观 */
  height: 100px;
  width: 2px;
  background-color: pink;

  /* 定位 */
  position: absolute;
  left: 50%;

  /* 旋转相关 */
  transform-origin: 100px 100px;
  transform-origin: bottom left; /* 已左下角为中心旋转 */
  animation-duration: 3s; /* 动画时间 */
  animation-name: rotateSecondHand; /* 关键帧名字 */
  animation-timing-function: linear; /* 动画时间函数 */
  animation-iteration-count: infinite; /* 让动画永远执行下去 */
  /* animation: 3s linear infinite rotateSecondHand; 
  上面的可以写成那么一句，但是如果各个参数的位置忘了怎么写的话
  可以分开写 */
}

@keyframes rotateSecondHand {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}