大厂50万节点监控系统架构设计&Prometheus底层源码级剖析

download：大厂50万节点监控系统架构设计&Prometheus底层源码级剖析

抖音的小圆球加载效果置信大家都见识过，也对其中的完成原理应该有一定的猎奇心吧，下面就让我带大家来探究一下小圆球加载效果的完成原理吧。

要完成两个小圆球，我们能够考虑两种计划的完成，第一种就是css计划，画两个小圆球，然后运用css动画来完成，而第二种则是运用canvas计划。我们首先来尝试第一种计划，首先肯定是要画出两个小圆球，这不就是相当于画两个圆嘛，所以运用宽高加圆角属性即可完成。

html代码如下:

<div class="rotate-ball">
  <div class="small-ball small-left-ball"></div>
  <div class="small-ball small-right-ball"></div>
</div>

首先是一个旋转的容器元素，接着就是左右两个小圆球，我的思绪也很简单，既然两个小球是相互旋转的，那也就是说我给它们的父元素旋转不就到达了两个小球相互旋转的效果吗？

接下来我们来看款式代码:

.small-ball {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.small-ball.small-left-ball {
    background-color: #e94359;
}
.small-ball.small-right-ball {
    background-color: #74f0ed;
}
.rotate-ball {
    width: 22px;
    animation: rotate 5s ease-in infinite forwards;
    transition: 2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@keyframes rotate {
   0% {
      transform: rotateY(0deg);
   }
   100% {
      transform: rotateY(360deg);
   }
}