用CSS3实现Postman的loading效果

本文算不上技术分享，就是闲着没事记录自己干了些啥
链接codepen.io/zhu8191553/…

• 前段时间电话面试，面试官问了我一个问题，如何用CSS实现让一个元素绕着某一个点旋转的动画。当时我对CSS动画并没有了解很多，所以这道题就没有回答上，之后我仔细看了一下CSS动画部分了解到使用transform-origin这个属性可以很简单的实现这个效果。
• 工作中经常能用到Postman，一直觉得它的loading有意思的，所以就决定实现一下Postman的loading效果。

一、样式

由三个圆环和一个中心的大圆点，以及在圆环上移动的小圆点组成，以下是html、css代码以及效果图

<div class="ring1">
  <div class="ring2"></div>
  <div class="ring3"></div>
  <div class="dot"></div>
</div>

.ring1, .ring2, .ring3, .dot {
  border-radius: 50%;
  border: 1px solid #f47023;
}
.ring2, .ring3, .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ring1 {
  height: 110px;
  width: 110px;
  position: relative;
  margin: 40px auto;
}
.ring2 {
  height: 88px;
  width: 88px;
}
.ring3 {
  height: 66px;
  width: 66px;
}
.dot {
  height: 33px;
  width: 33px;
  background-color: #f47023;
}
/* 圆环上的小圆点 */
.ring1:after, .ring2:after, .ring3:after  {
  content: " ";
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #f47023;
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
}

二、添加关键帧动画，让小圆点旋转360°

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ring1:after {
  transform-origin: 4px 59px;
  animation: rotation 3s infinite linear;
}
.ring2:after {
  transform-origin: 4px 48px;
  animation: rotation 2s infinite linear;
}
.ring3:after {
  transform-origin: 4px 37px;
  animation: rotation 1.2s infinite linear;
}

这里发现，添加完让圆环上的小圆点旋转360°关键帧动画，没有任何反应；其实动画是生效了的只是现在小圆点旋转的圆点是小圆点的中心点，所以看起来没有动。

三、利用transform-origin让小圆点在圆环上移动

这时候就能想到利用transform-origin这个属性来把三个圆环上的小圆点的圆心都定义成中间大圆点的中心点，那么小圆点就可以在圆环上移动了，如下图所示。

CSS实现把三个圆环上的小圆点的圆点都定义成中间大圆点的中心点

.ring1:after {
  transform-origin: 4px 59px;
  animation: rotation 3s infinite linear;
}
.ring2:after {
  transform-origin: 4px 48px;
  animation: rotation 2s infinite linear;
}
.ring3:after {
  transform-origin: 4px 37px;
  animation: rotation 1.2s infinite linear;
}

效果如图：