為了讓網(wǎng)站更具美感和動態(tài)性，我們可以為網(wǎng)站添加 CSS 加載動畫。在網(wǎng)頁加載時，很多時候會出現(xiàn)一些等待時間，而這些時間若沒有足夠的耐心與耐性，也許就容易引起用戶的疲勞。因此，添加CSS加載動畫能夠使用戶在等待的過程中得到一些視覺上的反饋，同時也可提升用戶體驗。

/*創(chuàng)建一個CSS加載動畫的CSS樣式*/
.loader{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #00000082; /*背景顏色*/
opacity: 1;
filter: alpha(opacity=100);
display: none; /*默認不顯示*/
}
.loader:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
height: 80px;
width: 80px;
border-radius: 50%;
border: 5px solid #f3f3f3;
border-top-color: #4285f4;
animation: spin 1s linear infinite;
z-index: 1001;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}

這段CSS代碼可以創(chuàng)建一個圓形的加載動畫，其中.loader類設置了動畫的固定定位，以及一個透明度為50%的黑色背景，使其顯示出來。而 .loader:before 則是實際用來顯示動畫的元素。使用了絕對定位，margin: (-40px, -40px) 和 top/left: 50% 使其水平與垂直劇中。此外， border-radius: 50% 其意在將元素的形狀變?yōu)閳A形。動畫通過 animation 屬性實現(xiàn)。

要讓動畫在網(wǎng)頁的加載過程中被觸發(fā)，需要加上以下代碼：

jQuery(window).load(function() { 
$('.loader').fadeOut(); 
});

這段 jQuery 代碼在網(wǎng)頁的所有資產(chǎn)（包括 CSS、JS、圖片等資源）都加載完成后，將 .loader 元素的透明度從 100% 變?yōu)?0%，達到隱藏動畫的效果。

在 HTML 中，可以使用以下代碼呈現(xiàn)網(wǎng)頁加載動畫：

<div class="loader"></ div>

這樣我們就能夠向網(wǎng)站添加加載動畫并優(yōu)化用戶體驗！