在網頁設計中，圖標的運用是非常廣泛的。而圖標的動態效果可以帶來更好的用戶體驗，并且可以使頁面更加生動活潑。下面就來介紹一下如何實現圖標的自動旋轉效果。

.icon {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("icon.png");
background-size: contain;
transition: transform 1s ease-in-out;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

這里我們定義了一個名為“icon”的樣式類，它定義了圖標的基礎樣式屬性。通過“background-image”屬性設置圖標的背景圖片，然后使用“transition”屬性定義了一個轉換效果，使得圖標在旋轉的過程中可以平滑過渡。同時，我們也定義了一個名為“rotate”的動畫，使用“@keyframes”語法來定義旋轉的動畫效果。其中從“transform:rotate(0deg)”到“transform:rotate(360deg)”表示圖標在旋轉過程中角度的變化。而“infinite”表示動畫應該無限播放。

最后，將定義好的樣式類應用在需要旋轉的圖標元素上，就可以輕松實現圖標的自動旋轉效果。