要實現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屬性的值可以實現不同的動畫效果,例如改變持續時間、動畫速度、旋轉角度等。