CSS微动画 - Loading来了！时钟转转转

Q: 连假後脑袋不好使呢！
A: 脑袋可不可以也Rotate转起来？

本篇还是Loading，这次要做的是一个常见的时钟icon，内部的指针会一直旋转的Loading效果。

先画出钟面以及指针

将指针定位在正中间，且bottom定位为50%。

<style>
  .container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: LightCyan;
    border: 6px solid DarkCyan;
    border-radius: 50%;
  }
  .dot {
    position: absolute;
    left: calc(50% - 6px);
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    background-color: DarkCyan;
    border-radius: 50%;
  }
  .pointer {
    position: absolute;
    left: calc(50% - 6px);
    bottom: 50%;
    width: 12px;
    border-radius: 6px 6px 0 0;
    background-color: DarkCyan;
  }
  .hour {
    height: 45px;
  }
  .min {
    height: 60px;
  }
</style>

<div class="container">
  <div class="dot"></div>
  <div class="pointer min"></div>
  <div class="pointer hour"></div>
</div>

让指针旋转

为了让指针以中心点旋转，会需要修改transform-origin，也就是元素变形的轴点，预设为元素的正中央，如果只修改 Y 轴的轴点，则 X 轴会为值在正中央，指针将以元素的最下方作为旋转的轴点，所以将transform-origim设置为bottom。这时候transform旋转角度时，就会是时钟的旋转的样子。

<style>
  .pointer {
    transform-origin: bottom;
  }
  .hour {
    transform: rotate(45deg);
  }
  .min {
    transform: rotate(260deg);
  }
</style>

无限旋转

要让指针无限旋转就可以用animation啦！由於指针都是旋转一圈，只有时间不一样，所以将共同使用的属性写在.pointer，在针对不同的指针给予不同的animation-duration。

<style>
  .pointer {
    animation-name: clockRotate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .hour {
    animation-duration: 5s;
  }
  .min {
    animation-duration: 1s;
  }
  @keyframes clockRotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

本篇比较特别的属性为transform-origin，可以改变元素transform的轴点！如果值为scale(1.2)，则预设会以元素的正中心放大，但如果修改transform-origin设置为right bottom，那麽元素放大的轴点就会变成右下角。当要做色块缩放、旋转等等元素变形效果时，transform-origin的设置可以为动态效果带来更多变化！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！