CSS樣式旋轉(zhuǎn)動畫可以為網(wǎng)頁增加一些生動和活力。本文將介紹如何使用CSS樣式旋轉(zhuǎn)動畫來實(shí)現(xiàn)這一效果。

/* 定義旋轉(zhuǎn)動畫 */
.rotate {
animation: rotate 1s infinite linear;
}
/* 關(guān)鍵幀定義 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代碼定義了一個名為rotate的旋轉(zhuǎn)動畫，并將其應(yīng)用到相應(yīng)的元素上（使用類選擇器）。animation屬性指定動畫的名稱、持續(xù)時間、動畫函數(shù)和迭代次數(shù)。在這里，動畫的名稱為rotate，持續(xù)時間為1秒，使用linear動畫函數(shù)，無限次重復(fù)。

接下來，我們使用@keyframes規(guī)則定義了動畫的運(yùn)動軌跡。從起始幀到停止幀之間的所有狀態(tài)都可以通過關(guān)鍵幀來定義。在這里，起始幀定義了元素的初始狀態(tài)（旋轉(zhuǎn)0度），而停止幀則定義了元素的結(jié)束狀態(tài)（旋轉(zhuǎn)360度，即完整的一圈）。

通過這些代碼，我們可以實(shí)現(xiàn)一個簡單的CSS樣式旋轉(zhuǎn)動畫，為網(wǎng)頁增加動態(tài)效果。