[分享]css中怎么使图片一直旋转

CSS中旋转图片是一个有趣的特效，你可以用它创建很多有趣的效果。在这篇文章中，我们将介绍如何使用 CSS 使一个图片不停的旋转。img { animation: spin 2s linear infi...

CSS中旋转图片是一个有趣的特效，你可以用它创建很多有趣的效果。在这篇文章中，我们将介绍如何使用 CSS 使一个图片不停的旋转。

img {
  animation: spin 2s linear infinite;
}

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

上述代码使用了 CSS3 的动画属性，通过设置动画持续时间和旋转角度以及旋转次数等参数来实现图片不停的旋转。具体来说，我们使用了 animation 属性来定义动画，指定了动画名spin、动画的持续时间2s、动画时间函数linear和动画的无限循环infinite。

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

我们还定义了一个关键帧名称为spin，它从旋转角度为0度开始，到旋转角度为360度结束。通过在动画中引用这个关键帧，就可以让图片不停地旋转了。

需要注意的是，要让图片旋转，必须将它的display属性设置为block，因为默认情况下img元素的display属性是inline。

总之，通过上述代码，你可以轻松地使图片不停地旋转，为你的网站增加更多的动感和趣味性。