自動(dòng)旋轉(zhuǎn)圖片一直是網(wǎng)頁設(shè)計(jì)中不可或缺的一個(gè)特效。在使用 CSS 來制作這個(gè)效果時(shí)，我們可以使用動(dòng)畫屬性以及 transform 函數(shù)來達(dá)到自動(dòng)旋轉(zhuǎn)的效果。

/* 首先要給圖片設(shè)置一個(gè)類名 */
.auto-rotate-img {
/* 設(shè)置動(dòng)畫的名稱、持續(xù)時(shí)間、播放次數(shù)等 */
animation: rotate 5s linear infinite;
/* 設(shè)置變換函數(shù)，這里使用 rotate() 函數(shù)，第一個(gè)參數(shù)是旋轉(zhuǎn)的角度，第二個(gè)是旋轉(zhuǎn)的軸心點(diǎn)。*/
transform-origin: center center;
}
/* 定義動(dòng)畫 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

以上是一個(gè)簡單的實(shí)現(xiàn)自動(dòng)旋轉(zhuǎn)的示例。我們首先設(shè)置了一個(gè)類名auto-rotate-img，然后定義了一個(gè)名為rotate的動(dòng)畫，持續(xù)時(shí)間為 5 秒，線性播放，無限循環(huán)。接下來我們使用transform-origin函數(shù)，將旋轉(zhuǎn)軸心點(diǎn)設(shè)置為圖片中心點(diǎn)。最后我們在動(dòng)畫中定義旋轉(zhuǎn)的角度，從 0 度到 360 度。

這里的關(guān)鍵在于@keyframes關(guān)鍵字，這個(gè)關(guān)鍵字用于定義動(dòng)畫，其中from表示動(dòng)畫的起始狀態(tài)，to表示動(dòng)畫的結(jié)束狀態(tài)。在這個(gè)例子中，我們從 0 度開始旋轉(zhuǎn)到 360 度，實(shí)現(xiàn)了自動(dòng)旋轉(zhuǎn)的效果。

除了以上示例，我們還可以通過更改動(dòng)畫的參數(shù)值，實(shí)現(xiàn)不同的自動(dòng)旋轉(zhuǎn)效果。例如，我們可以改變旋轉(zhuǎn)的方向、速度、角度等。