CSS3是一種用于網(wǎng)站排版和布局的標(biāo)準(zhǔn)語(yǔ)言，在其中有許多很酷的特效可以使用。其中一個(gè)特效就是關(guān)鍵幀循環(huán)特效。
/* 代碼樣例： */
@keyframes myanimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.circular {
/* 設(shè)置CSS類circular元素的樣式，旋轉(zhuǎn)和循環(huán)特效 */
animation: myanimation 2s linear infinite;
}在這個(gè)例子中，我們使用CSS3的@keyframes規(guī)則來(lái)定義一個(gè)名稱為 myanimation 的關(guān)鍵幀動(dòng)畫。一個(gè)關(guān)鍵幀動(dòng)畫由一系列關(guān)鍵幀組成，每個(gè)關(guān)鍵幀都定義了動(dòng)畫過(guò)程中元素應(yīng)該如何展現(xiàn)。
在這個(gè)例子中，我們?cè)O(shè)置了兩個(gè)關(guān)鍵幀：初始狀態(tài)（0%），和最終狀態(tài)（100%）。在初始狀態(tài)下，我們?cè)O(shè)置了元素的旋轉(zhuǎn)角度為0度，而在最終狀態(tài)下，旋轉(zhuǎn)角度變?yōu)?60度。這樣，我們就完成了一個(gè)在2秒內(nèi)完成360度的旋轉(zhuǎn)動(dòng)畫。
接下來(lái)，我們?cè)跇邮奖碇惺褂昧?.circular 類選擇器，賦予它設(shè)置了 myanimation 動(dòng)畫的屬性。這樣，就可以把該類應(yīng)用到任何我們想要旋轉(zhuǎn)和循環(huán)顯示的元素上。
/* 增加一個(gè)按鈕用于觸發(fā)特效應(yīng)用 */
現(xiàn)在，我們可以在頁(yè)面上增加任意數(shù)量的 circular 元素，每個(gè)元素都會(huì)應(yīng)用相同的旋轉(zhuǎn)和循環(huán)特效。我們只需在 HTML 代碼中增加如下一個(gè)元素即可：
通過(guò)這種方式，我們就可以使用 CSS3 關(guān)鍵幀特效在網(wǎng)站中實(shí)現(xiàn)各種酷炫的動(dòng)畫效果了。