CSS 旋轉(zhuǎn)動畫是一種常用的動畫效果，在使用CSS編寫時常常需要不斷地進行旋轉(zhuǎn)以達到優(yōu)美的視覺效果。下面我們來學(xué)習(xí)一下如何實現(xiàn) CSS 不斷旋轉(zhuǎn)的動畫效果。

/* 定義旋轉(zhuǎn)動畫 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 添加動畫效果 */
.element {
animation: rotate 2s linear infinite;
}

在上面的代碼中，我們定義了一個 旋轉(zhuǎn) 動畫，通過不斷改變元素的 transform: rotate() 屬性來實現(xiàn)不斷旋轉(zhuǎn)的效果。我們使用了 animation 屬性，它可以讓動畫效果不斷進行，實現(xiàn)無限旋轉(zhuǎn)。

我們還可以通過改變 animation-duration 屬性的值來控制旋轉(zhuǎn)速度，比如將上面的時間改為 1s，就能讓元素快速旋轉(zhuǎn)。

/* 修改動畫時間 */
.element {
animation: rotate 1s linear infinite;
}

總結(jié)一下，CSS 旋轉(zhuǎn)動畫不斷旋轉(zhuǎn)的實現(xiàn)方法有：

• 定義旋轉(zhuǎn)動畫，設(shè)置 from 和 to 兩個關(guān)鍵幀，通過 transform: rotate() 屬性實現(xiàn)旋轉(zhuǎn)。
• 使用 animation 屬性來添加動畫效果，將動畫時間設(shè)為 infinite 可以實現(xiàn)不斷旋轉(zhuǎn)。
• 通過改變 animation-duration 屬性的值來改變旋轉(zhuǎn)速度。