要讓加載動畫里的元素轉起來，最簡單的方法是使用 css 的 @keyframes 搭配選擇器實現旋轉效果。1. 首先通過 @keyframes 定義動畫，如 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}，實現從 0 度到 360 度的旋轉。2. 然后將動畫綁定到目標元素上，如 .loader { animation: spin 1s linear infinite; }，使元素每秒無限循環旋轉。3. 可結合偽元素優化動畫表現，例如用 .loader::after 創建帶缺口的旋轉小圓圈。4. 注意性能控制、瀏覽器兼容性及動畫流暢性，如添加前綴或調整 timing function。掌握這些步驟即可輕松實現旋轉類加載動畫。
要讓加載動畫里的元素轉起來，最簡單的辦法就是用 css 的 @keyframes 搭配選擇器來實現旋轉效果。核心思路是通過設置關鍵幀動畫，不斷改變元素的 transform: rotate() 值，從而形成持續旋轉的視覺效果。
1. 使用 @keyframes 定義旋轉動畫
想讓一個加載圖標動起來，第一步是定義一個旋轉的動畫。你可以這樣寫：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
這段代碼的意思是：從 0 度轉到 360 度，完成一圈旋轉。這個動畫可以綁定在任意你想讓它轉起來的元素上。
立即學習“前端免費學習筆記（深入）”；
接下來，你需要給目標元素加上動畫屬性，比如：
.loader { animation: spin 1s linear infinite; }
這樣，.loader 這個元素就會以每秒一圈的速度無限循環旋轉。
2. 結合偽元素優化動畫表現
有時候你不想直接給內容容器加旋轉，而是希望用一個單獨的圖形來作為加載指示器。這時候可以用偽元素 ::before 或 ::after 來創建一個只負責動畫的部分。
例如：
.loader::after { content: ''; display: block; width: 20px; height: 20px; border: 2px solid #333; border-radius: 50%; border-top-color: transparent; animation: spin 0.8s linear infinite; }
這里創建了一個帶缺口的小圓圈，配上旋轉動畫就變成了常見的加載圈效果。
3. 注意事項和常見問題
- 性能方面：CSS 動畫性能通常不錯，但如果頁面中有多個復雜動畫同時運行，還是要注意控制數量。
- 瀏覽器兼容性：現代瀏覽器基本都支持 @keyframes 和 transform，但如果你需要兼容舊版 IE，可能需要加 -ms- 或 -webkit- 前綴。
- 動畫卡頓：如果動畫看起來不流暢，可以嘗試把 animation-timing-function 設置為 linear，避免加速減速造成抖動。
- 顏色變化配合旋轉：有時候為了讓加載動畫更生動，可以在 @keyframes 中加入 opacity 或 color 變化。
基本上就這些。只要掌握好 @keyframes 和選擇器的搭配，就能輕松做出各種旋轉類加載動畫了。
