css 图片一直旋转

在CSS中，我们可以使用“@keyframes”关键字来创建动画效果，这个关键字后面跟着动画名称和其属性。

接着我们可以在“animation”属性中使用该动画名称，来实现动画效果。例如下面的代码：

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

   to {
      transform: rotate(360deg);
   }
}

img {
   animation: rotate 2s infinite;
}

上面的代码中，“@keyframes”关键字用于定义动画名称“rotate”，其中包含两个关键帧：“from”和“to”，分别表示初始状态和结束状态。

在“from”状态中，“transform”属性被设置为“rotate(0deg)”表示图像的旋转角度为0度。在“to”状态中，“transform”属性被设置为“rotate(360deg)”表示图像的旋转角度为360度，即不断旋转一圈。

下面的CSS样式代码可以在图像上应用上述动画：

img {
   animation: rotate 2s infinite;
}

上面的代码中，“animation”属性用于为图像应用动画效果，其中“rotate”指定动画名称，“2s”指定动画的过渡时间为2秒，“infinite”表示该动画将持续不断地循环执行，直到停止。

通过上述代码，我们可以实现一种图像一直旋转的动画效果，增加网页的视觉吸引力。