CSS 可以实现许多有趣的效果,一个常见的例子是将一张图片转动。下面是一个简单的示例,展示如何使用 CSS 使一张图片逆时针旋转: .rotate { animation: rotate 2s inf
CSS 可以实现许多有趣的效果,一个常见的例子是将一张图片转动。下面是一个简单的示例,展示如何使用 CSS 使一张图片逆时针旋转:
.rotate { animation: rotate 2s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
以上代码中,我们首先定义了一个名为“rotate”的 CSS 类。它将应用一个名为“rotate”的动画,并设定持续时间为 2 秒,无限循环,并且使用线性动画。
接着,我们使用 @keyframes 规则来定义实际的旋转效果。这里我们设置起始状态为“0deg”(即图片不旋转),结束状态为“-360deg”(即一圈完整的逆时针旋转)。
最后,我们可以在 HTML 文件中添加一个使用了“rotate”类的标签,如下所示:
<img src="img.png" class="rotate" alt="旋转的图片">
这样一来,我们的图片就会不断地逆时针旋转,直到页面关闭或该标签被移除。
粉丝
0
关注
0
收藏
0