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

使用纯CSS3，你可以创建一个简单的圆圈加载动画。以下是一个基本的示例，它使用CSS的@keyframes和animation属性来定义和应用动画。

HTML:

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

CSS:

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

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

在这个例子中，.loader类定义了一个具有特定宽度和高度的圆形div。border属性用于设置圆的边框，其中border-top被设置为不同的颜色以形成加载效果。border-radius: 50%;使div成为一个完美的圆。

@keyframes规则用于创建动画。在这个例子中，我们定义了一个名为spin的动画，它使元素从0度旋转到360度。

最后，animation属性被应用于.loader类，以将spin动画应用于该元素。动画的持续时间被设置为2秒，动画的速度曲线是线性的，并且动画会无限次地重复。