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将不断以中心点为轴心进行旋转，直到动画结束。