[分享]css下拉加载的圆圈怎么制作

CSS下拉加载的圆圈怎么制作？可以使用CSS3的 transform: rotate() 属性和 @keyframes 规则来实现。下面是一份简单的示例代码：

.spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
} 

在这个例子中，我们创建了一个 .spinner 的 CSS 类，包括了以下的样式规则：

• 宽度和高度为 24 像素
• 圆角半径为 50%
• 边框宽度为 2 像素，颜色为灰色
• 上边框颜色为黑色
• 应用了 animation: spin 0.6s linear infinite; 规则，它将启动一个名为 spin 的动画，并且该动画将以线性方式无限循环。

我们还定义了一个名为 spin 的 @keyframes 规则，它会将旋转的开始位置从 0 度逐渐转到 360 度结束位置。

该示例代码的效果如下：

通过使用这种方法，我们可以为我们的网页应用程序添加视觉效果，以增强用户体验。