CSS是一種常用的樣式語(yǔ)言，可以使網(wǎng)頁(yè)變得更加美觀和互動(dòng)。今天我們來(lái)學(xué)習(xí)一下如何使用CSS來(lái)實(shí)現(xiàn)圖片持續(xù)旋轉(zhuǎn)。

.rotate {
animation: rotation 5s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

上述代碼中，我們?cè)贑SS中定義了一個(gè)名為“rotate”的類，它包含一個(gè)屬性“animation”，它規(guī)定了我們要進(jìn)行旋轉(zhuǎn)動(dòng)畫的風(fēng)格：旋轉(zhuǎn)5秒，無(wú)限次數(shù)，線性變化。接著，我們定義了“@keyframes”規(guī)則，這是用來(lái)創(chuàng)建動(dòng)畫序列的關(guān)鍵字。這個(gè)規(guī)則告訴瀏覽器，從0度開始旋轉(zhuǎn)，然后在5秒鐘內(nèi)旋轉(zhuǎn)到359度，最后無(wú)限循環(huán)。

接下來(lái)，我們只需要將這個(gè)類應(yīng)用到我們的圖片上即可。代碼如下：

這樣就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的旋轉(zhuǎn)圖片的效果了。

當(dāng)然，我們也可以對(duì)旋轉(zhuǎn)的角度、時(shí)間進(jìn)行修改，以得到不同的效果。例如，如果我們將5秒改為2秒，則只需要旋轉(zhuǎn)兩秒鐘就可以完成一輪旋轉(zhuǎn)。

.rotate {
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}

通過(guò)這種簡(jiǎn)單的方法，我們可以為網(wǎng)頁(yè)增加更多視覺(jué)效果，使網(wǎng)頁(yè)變得更加豐富和動(dòng)態(tài)。