CSS旋转动画：简单易懂的实现方法

要使用CSS实现旋转动画，需要使用以下步骤：

1. 创建一个HTML元素，例如一个div或img，用于展示要旋转的内容。

2. 在CSS中使用'transform'属性来旋转元素。例如，可以使用'rotate()'函数来旋转元素。

3. 使用'animation'属性来创建动画效果。设置动画的持续时间、动画方式和重复次数等。

下面是一个简单的CSS旋转动画的实现示例：

HTML代码：

<div class='box'></div>

CSS代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

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

在上面的示例中，我们创建了一个宽高为100px的红色div，然后使用'animation'属性来创建一个名为'rotate'的旋转动画效果。动画持续时间为2秒，动画方式为线性，重复次数为无限。接下来，我们使用'@keyframes'规则来定义动画的关键帧。我们将0度设置为初始状态，360度设置为最终状态。这样，当动画播放时，div将不断以中心点为轴心进行旋转，直到动画结束。