CSS動畫中的旋轉效果是很常見的，而css無限循環旋轉效果更是讓網頁增添了一份生動的情趣感。以下是一些實現css無限循環旋轉的方法。

/* 方法一：使用@keyframes動效實現 */
.rotate {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 方法二：使用transition實現 */
.rotate {
transform: rotate(0deg);
transition: all 1s linear;
}
.rotate.active {
transform: rotate(360deg);
transition: all 1s linear;
transition-delay: 1s;
}
setInterval(function() {
document.querySelector('.rotate').classList.add('active');
setTimeout(function() {
document.querySelector('.rotate').classList.remove('active');
}, 2000);
}, 3000);
/* 方法三：使用transform和setInterval實現 */
var deg = 0;
setInterval(function() {
deg = deg + 1;
if (deg >360) {
deg = 0;
}
document.querySelector('.rotate').style.transform = 'rotate(' + deg + 'deg)';
}, 10);

通過以上幾種方法，可以輕松實現css無限循環旋轉動效。