隨著web開發(fā)的不斷發(fā)展，web應用和網(wǎng)站變得越來越豐富和多樣化。其中動畫效果是吸引用戶眼球的重要方式之一。而css3的出現(xiàn)為我們帶來了更多的動畫效果，比如今天要介紹的自轉(zhuǎn)動畫效果。

.box{
width:200px;
height:200px;
background-color:#f00;
animation:rotate 5s infinite linear; /*設置動畫*/
}
@keyframes rotate{
0%{transform:rotate(0);} /*動畫開始位置*/
100%{transform:rotate(360deg);} /*動畫結束位置*/
}

上面的代碼中，我們首先定義一個.box元素，寬高為200px，背景色為紅色。然后使用animation屬性設置動畫，指定動畫名稱rotate，時長為5秒，循環(huán)無限，速度為線性。

接著，我們使用@keyframes關鍵字定義動畫，指定動畫名稱為rotate，設置兩個關鍵幀0%和100%。0%表示動畫開始的位置，也就是元素不旋轉(zhuǎn)；100%表示動畫結束的位置，也就是元素旋轉(zhuǎn)360度。

最后，我們通過transform屬性實現(xiàn)旋轉(zhuǎn)效果。transform:rotate(0)表示不旋轉(zhuǎn)，transform:rotate(360deg)表示旋轉(zhuǎn)360度。

通過上述代碼，我們實現(xiàn)了一個簡單的自轉(zhuǎn)動畫效果。你可以通過修改animation屬性和@keyframes關鍵字，調(diào)整動畫的時長、循環(huán)次數(shù)、變化速度、旋轉(zhuǎn)角度等參數(shù)，實現(xiàn)更加復雜和炫酷的動畫效果。