[分享]css做的加载动画原理

CSS做的加载动画是一种非常流行的前端技术，它可以让网页更加生动。这篇文章将介绍CSS做的加载动画原理。

.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  animation: spinner 0.8s infinite linear;
}

.spinner:before {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid #4db6ac;
  border-color: #4db6ac transparent #4db6ac transparent;
  animation: spinner 1.2s infinite ease-in-out;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} 

上面是一个CSS做的加载动画的具体代码。其中，核心原理是使用了CSS动画的特性，通过设置元素的旋转角度实现旋转的效果。同时，利用伪元素模拟出中心圆圈跳动的效果，可以给人一种非常生动的感觉。

总而言之，CSS做的加载动画原理是非常简单的。通过设置CSS动画和伪元素可以实现一些非常生动的效果，这些效果可以让网页更加生动、富有活力。