CSS自動旋轉動畫效果是一個常見的前端動畫效果，它可以使元素在一定時間內自動旋轉。下面我們來看一下如何使用CSS實現這一效果。
// HTML 結構代碼
<div class="box">
<img src="image.png" alt="旋轉圖片">
</div>
// CSS 樣式代碼
.box {
animation: rotate 5s infinite linear; /* 一次旋轉5秒，無限次重復 */
}
@keyframes rotate {
from {
transform: rotate(0deg); /* 開始時旋轉角度為0度 */
}
to {
transform: rotate(360deg); /* 結束時旋轉角度為360度 */
}
}在以上代碼中，我們創建了一個包含圖片的
元素，并將其命名為“box”。然后，我們使用CSS中的“@keyframes”規則定義一個名為“rotate”的動畫，它會將.box元素從“0度”旋轉到“360度”。
最后，我們將動畫應用于.box元素中，使用“animation”屬性指定動畫的名稱、時間、重復次數和動畫效果。在這個例子中，我們使用了“linear”函數來使動畫勻速進行。
除了使用“@keyframes”規則定義動畫外，我們還可以使用CSS“transform”屬性來定義元素的旋轉角度、縮放大小和平移位置等。例如，我們可以將上面的旋轉動畫代碼修改為：
.box {
transform: rotate(360deg); /* 這里我們不需要使用“@keyframes”規則 */
transition: transform 5s; /* 使用“transition”屬性指定轉換完成時間 */
}
.box:hover {
transform: rotate(0deg);
}在這個例子中，我們使用了CSS“transition”屬性來定義元素的轉換效果。當鼠標懸停在.box元素上時，元素將會從“360度”旋轉到“0度”，動畫完成的時間為5秒。
總的來說，CSS自動旋轉動畫效果可以為網站增加視覺效果，并吸引用戶的注意力。使用CSS“@keyframes”規則或“transform”屬性來創建動畫，可以使我們更加靈活地為網站添加多種動態效果。
上一篇ajax應用程序基本技術
下一篇php suggest