css圆形正在加载动画

CSS圆形正在加载动画是一种美观的加载效果，可以让用户知道页面正在加载而不感到厌烦。下面我们来看一下CSS实现圆形正在加载动画的代码。

.loader {
  border: 8px solid #f3f3f3; /* 默认背景颜色 */
  border-top: 8px solid #3498db; /* 加载动画颜色 */
  border-radius: 50%; /* 圆形 */
  width: 60px; /* 宽度 */
  height: 60px; /* 高度 */
  animation: spin 2s linear infinite; /* 动画 */
}

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

如上代码所示，我们用.loader来定义了一个圆形的div，设置了宽度和高度，边框和边界半径来实现圆形的效果。然后我们用@keyframes来定义动画，其中from部分定义了加载动画的开始状态，to部分定义了加载动画的结束状态。我们定义了一个名为spin的动画，它旋转了360度，以线性时间2秒的形式执行。最后，我们将动画应用到.loader div上。

以上所述就是CSS圆形正在加载动画的实现方法，您可以将其应用到您的网站中，为用户提供更好的体验。