在網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)畫效果可以使網(wǎng)頁(yè)更加生動(dòng)有趣，而CSS中的自動(dòng)動(dòng)畫轉(zhuǎn)動(dòng)效果可以為網(wǎng)頁(yè)增添一份獨(dú)特的魅力。本文將為大家介紹如何使用CSS實(shí)現(xiàn)自動(dòng)動(dòng)畫轉(zhuǎn)動(dòng)效果。

/* 實(shí)現(xiàn)動(dòng)畫效果的CSS代碼 */
.box{
display: inline-block;
animation: rotation 2s linear infinite;
}
@keyframes rotation{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

首先，在CSS中定義一個(gè)類名為“box”的元素，通過該類名控制元素的樣式。為了實(shí)現(xiàn)動(dòng)畫效果，我們?cè)谠擃惷绿砑恿薬nimation屬性，并為該屬性設(shè)置了以下值：

• animation-name：指定動(dòng)畫的名稱為“rotation”；
• animation-duration：指定動(dòng)畫執(zhí)行的時(shí)間為2秒，即從開始到結(jié)束的時(shí)間；
• animation-timing-function：指定動(dòng)畫執(zhí)行的過程中速度的變化方式為線性（linear）；
• animation-iteration-count：指定動(dòng)畫無(wú)限次地執(zhí)行；

而animation屬性實(shí)際上是animation-name、animation-duration、animation-timing-function、animation-iteration-count的縮寫語(yǔ)法。

接下來，我們需要定義一個(gè)名為“rotation”的動(dòng)畫，該動(dòng)畫可以使元素在旋轉(zhuǎn)復(fù)原的過程中，產(chǎn)生旋轉(zhuǎn)的動(dòng)畫效果。為了定義旋轉(zhuǎn)對(duì)應(yīng)的動(dòng)畫，我們使用@keyframes語(yǔ)法，該語(yǔ)法為CSS3中的關(guān)鍵幀動(dòng)畫，即以不同時(shí)間點(diǎn)為基準(zhǔn)點(diǎn)，設(shè)置不同的樣式代碼。

/* 定義動(dòng)畫樣式 */
@keyframes rotation{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代碼中，我們使用定義了兩個(gè)關(guān)鍵幀，分別是“from”和“to”。在這里，“from”表示動(dòng)畫的起點(diǎn)，而“to”則表示動(dòng)畫的終點(diǎn)。在這兩個(gè)關(guān)鍵幀之間的樣式，在動(dòng)畫執(zhí)行的過程中會(huì)自動(dòng)進(jìn)行過渡。因此，在定義時(shí)，我們可以通過在“from”和“to”中分別設(shè)置元素的旋轉(zhuǎn)角度（0度和360度），來讓元素實(shí)現(xiàn)旋轉(zhuǎn)效果。

最終，通過這樣的代碼設(shè)置，即可實(shí)現(xiàn)元素的自動(dòng)動(dòng)畫轉(zhuǎn)動(dòng)效果。