CSS實(shí)現(xiàn)loading動圖是網(wǎng)頁設(shè)計(jì)中常用的技巧之一，可以讓用戶在等待頁面加載的過程中獲得更好的體驗(yàn)。下面我們一起來看一下如何通過CSS實(shí)現(xiàn)loading動圖。

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

我們定義了一個(gè)名為loading的CSS類，該類表示loading動圖的樣式。其中，我們設(shè)置了寬度為40px、高度為40px、圓角為50%的圓形邊框。這個(gè)邊框由4px寬的灰色線條構(gòu)成，頂部線條顏色為藍(lán)色。

接下來，我們通過CSS3動畫實(shí)現(xiàn)了加載圖的旋轉(zhuǎn)為spin的關(guān)鍵幀動畫。這是一個(gè)無限循環(huán)的動畫。

實(shí)際應(yīng)用的時(shí)候，我們只需要在需要加loading動畫的元素上應(yīng)用該類即可：

<div class="loading"></div>

這個(gè)div會自動顯示出loading動圖，直到頁面加載完成。