CSS幀動畫是一種非常實用的技術，能夠讓用戶在等待頁面加載時感到更加有趣和好玩。 在這個文章中，我們將學習如何創建一個很酷的幀動畫旋轉加載。

.spinner {
border: 10px solid #f3f3f3; 
border-top: 10px solid #3498db; 
border-radius: 50%; 
width: 50px; 
height: 50px; 
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

首先，我們需要創建一個容器來容納我們的加載動畫。 我們可以使用一個 div 元素并給它一個類名 "spinner"。

然后，我們需要為我們的“spinner”容器定義樣式。 我們想要一個圓形容器，因此我們需要給它一個寬度和高度，并添加一個邊框。 我們還需要在 CSS 中定義一個邊框底部的顏色，這樣我們的加載動畫看起來就像在旋轉。

接下來，我們將使用 CSS 規則 @keyframes 定義一個名為“spin”的動畫。 我們可以使用“transform：rotate（）”屬性在 z 軸上旋轉容器，并設置它在2秒內從0度旋轉到360度。

最后，我們將使用“animation”屬性將我們的動畫應用于我們的“spinner”容器。 我們將動畫名稱設置為“spin”，將其持續時間設置為2秒，并將其設置為“無限循環”。

在完成這些步驟后，我們就創建了一個簡單而又酷炫的幀動畫旋轉加載。它可以讓用戶在等待內容加載時感到更加有趣和好玩。