CSS 自定義加載動(dòng)畫 在網(wǎng)頁(yè)設(shè)計(jì)中，加載動(dòng)畫是非常重要的一個(gè)組成部分。加載動(dòng)畫能夠讓訪問(wèn)者體驗(yàn)到網(wǎng)頁(yè)正在加載，避免了訪問(wèn)者在等待過(guò)程中的焦慮。使用 CSS 自定義加載動(dòng)畫，能夠給用戶帶來(lái)更好的體驗(yàn)。 在 CSS 中，我們可以利用 @keyframes 和 animation 屬性來(lái)創(chuàng)建動(dòng)畫。下面是一個(gè)示例代碼，可以用來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的加載動(dòng)畫：

.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); }
}

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

.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%;
}
}

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