简单的纯css完成加载动画效果

不是很复杂，就直接放代码了。关于代码的解释说明在后面。

效果图

HTML代码

<div class="bouncing-loader">

  <div></div>

  <div></div>

  <div></div>

</div>

CSS代码

@keyframes bouncing-loader {

  to {

    opacity: 0.1;

    transform: translate3d(0, -1rem, 0);

  }

}

.bouncing-loader {

  display: flex;

  justify-content: center;

}

.bouncing-loader > div {

  width: 1rem;

  height: 1rem;

  margin: 3rem 0.2rem;

  background: #8385aa;

  border-radius: 50%;

  animation: bouncing-loader 0.6s infinite alternate;

}

.bouncing-loader > div:nth-child(2) {

  animation-delay: 0.2s;

}

.bouncing-loader > div:nth-child(3) {

  animation-delay: 0.4s;

}

---

代码解释

1. 使用 @keyframes 定义了具有两种状态的动画。
2. 使用 opacity 改变透明度，并使用 transform: translate3d() 在二维平面上向上转换，在 transform: translate3d() 上使用单轴平移可以提高动画的性能。
3. .bouncing-loader 是加载动画的父容器，并添加属性 display: flex 和 justify-content: center 将其居中。
4. 使用 .bouncing-loader > div 设置后面三个div的样式。其中设置他们的宽高为 1rem ，并用border-radius：50％ 将它们从正方形转换为圆形。
5. 使用 margin：3rem 0.2rem 将每个div距离顶部和底部边缘设置为3rem，左和右边距为0.2rem，美化一下避免相互重叠。
6. animation 属性是一个简写属性，用于设置六个动画属性。详细可以 查看这里
7. nth-child(n) 用于指定其孩子元素，这里是设置第二个div和第三个div的样式。
8. animation-delay 设置动画延迟，避免一起上下跳。有一个过度效果。

补充说明

• 注意： 1rem 一般是 16px