[分享]css中如何让图片自动旋转

CSS是一种强大的前端设计语言，可以使网站页面更加美观和动态。有时我们希望图片可以自动旋转，增强页面的视觉效果。下面我们就来看一下如何使用CSS让图片自动旋转。img { animation: rot...

CSS是一种强大的前端设计语言，可以使网站页面更加美观和动态。有时我们希望图片可以自动旋转，增强页面的视觉效果。下面我们就来看一下如何使用CSS让图片自动旋转。

img {
    animation: rotate 2s linear infinite; 
}

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

上述代码中，我们给图片添加了一个animation属性，值为rotate 2s linear infinite。这意味着图片将不断旋转，持续2秒。

接下来，我们要定义一个关键帧，使用@keyframes指令来实现。例如，我们定义了一个从0度到360度的动画。这样，当图片被添加了animation属性后，就会按照我们定义的过程不断地执行旋转动画。

这样就实现了让图片自动旋转的效果。当然，我们还可以通过调整animation和@keyframes的值，来实现不同的旋转动画效果。