CSS 自定義加載動畫 在網頁設計中，加載動畫是非常重要的一個組成部分。加載動畫能夠讓訪問者體驗到網頁正在加載，避免了訪問者在等待過程中的焦慮。使用 CSS 自定義加載動畫，能夠給用戶帶來更好的體驗。 在 CSS 中，我們可以利用 @keyframes 和 animation 屬性來創建動畫。下面是一個示例代碼，可以用來創建一個簡單的加載動畫：

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

上面的代碼中，我們首先定義了一個 .loading 類，設置了寬高、邊框大小、顏色等屬性。然后使用 animation 屬性，指定了一個名為 spin 的動畫，并且讓動畫無限循環。最后，我們使用 @keyframes 指定了動畫的具體效果：從 0% 的旋轉角度開始，到 100% 時旋轉 360 度。 這個加載動畫比較簡單，只是一個旋轉的圓圈。如果你想要更炫酷的加載動畫，可以使用 CSS3 中的一些高級技巧，比如動態變化的顏色、形狀等。下面這個例子可以讓你的加載動畫變成一個彩色精靈球：

.loading {
position: relative;
width: 30px;
height: 30px;
margin: 0 auto;
}
.loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
background: linear-gradient(45deg, #f0ff00, #ff0000, #00ff00, #0000ff);
background-size: 400% 400%;
animation: gradient 3s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

這個例子中，我們首先定義了一個 .loading 類，設置了寬、高，然后定義了一個偽元素 :before。在 :before 中，我們使用了 linear-gradient 函數，生成了一段紅-黃-綠-藍的漸變色條。同時，我們設置了 background-size，讓背景圖像變成了 400% x 400% 的大小，超出了元素的實際尺寸。接著，我們使用了 animation 屬性，讓漸變色條從左往右循環滾動。最后，我們使用了 @keyframes 指定了動畫的具體效果：先從 0% 的位置開始，過渡到 50% 時位置到達右邊界，然后又過渡到 100%，最后返回到 0% 的位置。 總結： 在網頁設計中，加載動畫是極其重要的，可以提高用戶體驗。使用 CSS 自定義加載動畫能夠讓你的網站更加炫酷。在設計加載動畫時，可以使用 @keyframes 和 animation 屬性建立動畫效果，運用漸變、旋轉、位置、形狀等技巧，讓你的加載動畫更加出彩。