温馨提示×

css3旋转动画循环效果怎么实现

小亿
146
2023-07-17 12:38:45
栏目: 编程语言

要实现CSS3旋转动画循环效果,可以使用@keyframes规则定义一个旋转动画,然后使用animation属性将动画应用于元素,并设置animation-iteration-count属性为"infinite",表示动画无限循环。下面是一个示例代码:

HTML:

<div class="box"></div>

CSS:

.box {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

在上面的代码中,创建一个名为"box"的div元素,并将旋转动画应用于它。动画名称为"rotate",持续时间为2秒,动画速度为线性,设置无限循环。

通过调整animation属性的值可以实现不同的动画效果,例如改变持续时间、动画速度、旋转角度等。

0