使用CSS实现旋转动画
本帖最后由 能者 于 2023-8-30 18:21 编辑要使用CSS实现旋转动画，可以使用`@keyframes`关键字定义一个动画序列，并使用`transform`属性来实现旋转效果。以下是一个基本的示例代码：
首先，在HTML中创建一个需要应用动画的元素，如一个`<div>`：
<div class="box"></div>
然后，在CSS中定义动画序列和样式：
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: rotate; /* 指定动画序列的名称 */
animation-duration: 2s; /* 动画持续时间 */
animation-iteration-count: infinite; /* 无限循环播放动画 */
}
@keyframes rotate {
0% {
transform: rotate(0deg); /* 初始状态，角度为0度 */
}
100% {
transform: rotate(360deg); /* 最终状态，角度为360度 */
}
}
在上面的代码中，我们使用`@keyframes`定义了一个名为`rotate`的动画序列，它包含了两个关键帧，分别是0%和100%。在0%时刻，将元素的`transform`属性设置为`rotate(0deg)`，即不旋转；在100%时刻，将元素的`transform`属性设置为`rotate(360deg)`，即顺时针旋转一圈。
最后，通过添加一个类名`box`给目标元素，就可以触发这个动画：
<div class="box"></div>
这样，这个红色的盒子就会以一个持续时间为2秒的旋转动画无限循环播放。你可以根据需要调整元素的大小、颜色和动画属性来实现你想要的效果。
页:
[1]