今天我們來學習一下如何在CSS中添加圖標旋轉動畫效果。

//HTML代碼
<i class="fas fa-cog"></i>
//CSS代碼
.fa-cog {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

代碼中我們先添加了一個FontAwesome的“fa-cog”圖標，然后為其添加了“spin”動畫，讓它在2秒內以線性無限循環的方式旋轉。

@keyframes是定義動畫的關鍵字，我們設定了從0%的旋轉角度為0度，到100%的旋轉角度為360度，就可以完成一次完整的旋轉。

這就是CSS中如何添加圖標旋轉動畫效果的方法。這個效果非常適合用來作為加載中的動畫或者按鈕等交互過程中的動畫。