CSS動(dòng)畫(huà)中的旋轉(zhuǎn)效果是很常見(jiàn)的，而css無(wú)限循環(huán)旋轉(zhuǎn)效果更是讓網(wǎng)頁(yè)增添了一份生動(dòng)的情趣感。以下是一些實(shí)現(xiàn)css無(wú)限循環(huán)旋轉(zhuǎn)的方法。

/* 方法一：使用@keyframes動(dòng)效實(shí)現(xiàn) */
.rotate {
animation: rotate 1s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 方法二：使用transition實(shí)現(xiàn) */
.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實(shí)現(xiàn) */
var deg = 0;
setInterval(function() {
deg = deg + 1;
if (deg >360) {
deg = 0;
}
document.querySelector('.rotate').style.transform = 'rotate(' + deg + 'deg)';
}, 10);

通過(guò)以上幾種方法，可以輕松實(shí)現(xiàn)css無(wú)限循環(huán)旋轉(zhuǎn)動(dòng)效。