要实现CSS3旋转动画循环效果,可以使用@keyframes规则定义一个旋转动画,然后使用animation属性将动画应用于元素,并设置animation-iteration-count属性为"infinite",表示动画无限循环。下面是一个示例代码:
HTML:
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属性的值可以实现不同的动画效果,例如改变持续时间、动画速度、旋转角度等。