css 图片 旋转一圈

CSS是一种广泛使用的样式表语言，可用于美化网页并增加交互性。其中一个有趣的效果就是图片旋转一圈，这样可以增加页面的动感和视觉效果。

img {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

上述代码可以将图片旋转一圈。在CSS中，使用“animation”和“@keyframes”关键字创建动画。

其中，“animation”属性定义动画的名称，“2s”是动画的持续时间， “infinite”表示动画无限循环，并且“linear”指定动画函数。

“@keyframes”关键字指定动画的关键帧。在这个例子中，“0％”表示动画开始的角度为0度，“100％”表示动画结束时的角度为360度（一整圈）。

这是一种简单而有趣的效果，可以通过调整动画的持续时间和图片的大小和位置来自定义设计。