[分享]css3实现圆圈loading

CSS3是一个可以让网页变得更加美观的强大技术，其中一个常见的应用场景就是实现圆圈loading效果。下面我们将简单介绍如何使用CSS3实现一个圆圈loading。.loading { width: ...

CSS3是一个可以让网页变得更加美观的强大技术，其中一个常见的应用场景就是实现圆圈loading效果。下面我们将简单介绍如何使用CSS3实现一个圆圈loading。

.loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  animation: spin 1s linear infinite;
}

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

上面的代码中，我们首先创建了一个类名为loading的元素，并设置了宽高为50px，边框颜色为灰色，边框宽度为5px，顶部边框为蓝色，以模拟出一个圆圈loading的效果。

接着，我们使用CSS3动画的特性，通过定义一个名为spin的关键帧动画规则，设置loading元素的旋转效果。在动画规则中，我们通过transform属性旋转loading元素，让它从初始状态到结束状态一共旋转了360度，并将动画设为线性无限循环播放。

以上就是使用CSS3实现圆圈loading的简单介绍，通过优雅的动画效果，让用户在等待过程中也能感受到不一样的视觉体验。