CSS转圈圈特效样式

CSS中的转圈圈效果，也称为加载动画或者进度条动画，通常通过使用伪元素`:before`或`:after`结合`animation`属性来实现。以下是一个基本的圆形旋转动画的例子：

.circle-loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #ccc; /* 或者你喜欢的颜色 */
}

.circle-loading:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff; /* 内部圆颜色 */
  position: absolute;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  animation: spin 2s linear infinite;
}

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

在这个例子中，`.circle-loading`是一个容器，内部有一个白色的圆心点，使用`animation`属性使其绕中心点进行顺时针旋转，创建了转圈的效果。你可以调整`width`, `height`, `border-radius`等样式来自定义形状，以及`animation-duration`（动画持续时间）和`animation-timing-function`（动画速度曲线）来改变效果。