使用纯CSS3实现圆圈加载的动画

在前端开发中，你可以使用纯CSS3来创建一个圆圈加载的动画。以下是一个简单的例子，它使用@keyframes来定义动画，以及animation属性来应用动画。

HTML:

<div class="loader"></div>

CSS:

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

在这个例子中，.loader类定义了一个具有特定宽度和高度的div，该div的边框是灰色的，但顶部边框是蓝色的。border-radius: 50%;使得这个div成为一个圆圈。然后，我们使用@keyframes定义了一个名为spin的动画，该动画会将元素从0度旋转到360度。最后，我们使用animation属性将这个动画应用到.loader类的元素上，并设置动画的持续时间为2秒，动画的速度曲线为线性，以及动画的播放次数为无限次。