纯CSS实现加载转圈样式

1. 加载转圈样式是什么

加载转圈样式是一种在网页中常见的loading效果，它是在页面数据还未加载出来时出现的，以此提示用户数据正在加载中，用户可以等待加载完成后再操作。

2. 实现方式

要实现加载转圈样式，我们需要使用CSS中的animation技术。CSS animation能够实现与时俱进的样式动态，让网页更富有活力。

下面是一段实现加载转圈样式的CSS代码：

.loader {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-left-color: #1abc9c;
  animation: spin 1s ease infinite;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

2.1 草稿实现

在实现之前可以先画出草图，草图可以让我们更好地了解需求，并快速写出对应的代码。

如下图所示，我们可以在页面中间添加一个加载转圈的元素。

2.2 CSS代码解析

接下来我们来分析刚才的CSS代码实现。

首先我们创建了一个<div>元素，将其设为圆形，高宽分别为50px，并且声明了边框和边框的颜色为rgba(0, 0, 0, 0.1)。

.loader {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

接着，我们将其左边框的颜色设置为绿色，以便表示加载正在进行中。

.loader {
  border-left-color: #1abc9c;
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

然后我们使用CSS animation实现元素旋转效果，并且设置它的动画时间为1秒，动画效果为ease，并且无限循环。

.loader {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-left-color: #1abc9c;
  animation: spin 1s ease infinite;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

最后我们定义了一个spin函数，用来实现旋转动画的具体实现，我们将它转动360°。

2.3 效果展示

最终效果如下图所示：

3. 总结

通过上面的代码和介绍，我们学会了如何使用CSS animation实现简单的加载转圈样式。

可以将这段代码应用到你的网站中，提高用户体验，让用户更好地感受你网站的专业性和质量。