[分享]css3实现一个简单的加载动画

CSS3是一种强大的样式语言，可以实现很多很酷的效果。其中之一是用CSS3实现一个简单的加载动画。

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading:before {
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 4px solid #999;
  border-top-color: #007bff;
  animation: loading 1s ease-in-out infinite;
}

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

上面的代码实现了一个简单的加载动画。首先，我们在一个容器中设置了flex布局，并将内容居中对齐。然后，在容器的before伪类中添加了一个圆形元素。该元素设置了高度、宽度和边框，其中边框的颜色为#999。接下来，我们通过设置border-top-color为#007bff，实现了一个旋转的动画效果。

最后，在keyframes中定义了一个名为loading的动画。该动画从0度旋转到360度，循环进行，实现了一个很好看的加载动画效果。

总之，CSS3是一种非常有趣和强大的技术，可以实现很多惊人的效果。这个简单的加载动画只是其中的一个例子。