[分享]css3实现图片一直旋转

CSS3是现代网页设计必不可少的一部分，它为我们提供了许多强大的设计工具。今天我们就来介绍如何使用CSS3实现图片的一直旋转效果。 .rotate { / 设置旋转动画 / animation: ro...

CSS3是现代网页设计必不可少的一部分，它为我们提供了许多强大的设计工具。今天我们就来介绍如何使用CSS3实现图片的一直旋转效果。

<style>
.rotate {
    /* 设置旋转动画 */
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>

<div class="rotate">
    <img src="your-image-url" alt="your-image">
</div> 

如上述代码，我们首先设置了一个名为“rotate”的CSS类，然后给它的子元素（这里是一张图片）设置了一个“rotate”动画。

在CSS3中，我们使用@keyframes来定义一个关键帧动画。我们定义了一个从0度旋转到360度的“rotate”动画，并设置为线性运动，时间为2秒，并且无限循环。

最后就是将这个CSS类应用到一个HTML元素上，这里用到了<div>标签，并在其中插入一张图片。这样就可以实现一直旋转的动画效果了。