使用CSS实现旋转动画

能者

要使用CSS实现旋转动画，可以使用`@keyframes`关键字定义一个动画序列，并使用`transform`属性来实现旋转效果。以下是一个基本的示例代码：

首先，在HTML中创建一个需要应用动画的元素，如一个`<div>`：

[HTML] 纯文本查看 复制代码

<div class="box"></div>

然后，在CSS中定义动画序列和样式：

[CSS] 纯文本查看 复制代码

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate; /* 指定动画序列的名称 */
  animation-duration: 2s; /* 动画持续时间 */
  animation-iteration-count: infinite; /* 无限循环播放动画 */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg); /* 初始状态，角度为0度 */
  }
  100% {
    transform: rotate(360deg); /* 最终状态，角度为360度 */
  }
}

在上面的代码中，我们使用`@keyframes`定义了一个名为`rotate`的动画序列，它包含了两个关键帧，分别是0%和100%。在0%时刻，将元素的`transform`属性设置为`rotate(0deg)`，即不旋转；在100%时刻，将元素的`transform`属性设置为`rotate(360deg)`，即顺时针旋转一圈。

最后，通过添加一个类名`box`给目标元素，就可以触发这个动画：

[HTML] 纯文本查看 复制代码

<div class="box"></div>

这样，这个红色的盒子就会以一个持续时间为2秒的旋转动画无限循环播放。你可以根据需要调整元素的大小、颜色和动画属性来实现你想要的效果。