CSS動畫是網(wǎng)頁設(shè)計中常用的技巧之一，可以輕松地讓頁面更加生動、有趣。其中一種常見的動畫效果就是元素的自轉(zhuǎn)，下面我們一起來學(xué)習(xí)如何實現(xiàn)一個CSS動畫自轉(zhuǎn)。

/*首先，我們需要定義一個元素*/
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;/*將正方形變成圓形*/
animation: spin 2s infinite linear; /*定義動畫名稱、時長、循環(huán)次數(shù)、動畫速度*/
}
@keyframes spin {
0% { transform: rotate(0deg); } /*起始狀態(tài)*/
100% { transform: rotate(360deg); } /*結(jié)束狀態(tài)*/
}

我們首先定義了一個.box元素，將其寬高設(shè)置為100px，背景顏色為紅色，并使用border-radius將其變成一個圓形。接下來，我們定義了一個名為spin的動畫，包含了動畫名稱、時長、循環(huán)次數(shù)、動畫速度等屬性。其中，linear表示動畫速度為勻速，即會保持等速旋轉(zhuǎn)。

在@keyframes中，我們定義了該動畫的兩個狀態(tài)，即起始狀態(tài)和結(jié)束狀態(tài)。在起始狀態(tài)下，我們將元素的旋轉(zhuǎn)角度設(shè)置為0deg，即其初始位置不旋轉(zhuǎn)；而在結(jié)束狀態(tài)下，我們將元素的旋轉(zhuǎn)角度設(shè)置為360deg，即完成一次完整的旋轉(zhuǎn)。

最后，我們只需要將定義好的動畫應(yīng)用到元素上即可。我們通過animation屬性，將.spin動畫應(yīng)用到了.box元素上，并設(shè)置它為無限循環(huán)，讓它不停地自轉(zhuǎn)起來。這樣，我們就完成了一個簡單的CSS動畫自轉(zhuǎn)的實現(xiàn)。