在網頁開發中，加載效果是非常重要的。用戶需要迅速地看到網頁內容，而加載效果則可以讓用戶知道網頁正在加載中，從而避免用戶誤以為網頁失效或卡頓。今天就來介紹一下如何利用CSS來為網頁添加加載效果。

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

上述代碼中，首先定義了一個類名為“spinner”的div，將其樣式設置為圓形邊框，并定義了其寬度和高度。然后通過“@keyframes”關鍵字定義了一個名為“spin”的動畫，描述了div元素的旋轉過程。最后在“spinner”的樣式中使用了“animation”屬性，將“spin”動畫應用于該元素中。這樣就實現了一個簡單的旋轉加載效果。

如果想讓“spinner”元素具有更多的變化，可以在旋轉過程中添加顏色變化、縮放等動畫效果。比如下面的代碼可以讓“spinner”元素在旋轉的同時逐漸變為黃色：

.spinner {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite, color-change 4s ease-in-out infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes color-change {
0% { background-color: #3498db; }
50% { background-color: #f1c40f; }
100% { background-color: #3498db; }
}

在上述代碼中，我們新增了一個名為“color-change”的動畫，并在“spinner”的樣式中同時應用了“spin”和“color-change”兩個動畫。在“color-change”動畫中，通過定義“@keyframes”實現了背景顏色在旋轉過程中逐漸從藍色變為黃色再變回藍色的變化過程。這樣，我們就實現了一個更為豐富的加載效果。