css加载动画小球转圈

可以使用CSS3中的animation属性来实现小球转圈的加载动画。具体实现步骤如下：

1. 创建一个div元素作为小球，设置宽高相等，border-radius为50%使其变成圆形。
2. 使用animation属性定义动画，包括动画名称、持续时间、动画方式、延迟时间等。
3. 在@keyframes中定义动画的关键帧，即小球在不同时间点的状态，例如在0%时小球位于左侧，50%时小球位于顶部，100%时小球回到左侧。
4. 将动画应用到小球上，使用animation属性指定动画名称和持续时间等参数。

以下是一个简单的示例代码：

<div class="ball"></div>

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f00;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translateX(0) rotate(0);
  }
  50% {
    transform: translateX(100%) rotate(360deg);
  }
  100% {
    transform: translateX(0) rotate(720deg);
  }
}