CSS3旋轉(zhuǎn)等待動(dòng)畫(huà)是一種非常流行的網(wǎng)頁(yè)UI效果，通過(guò)利用CSS3的旋轉(zhuǎn)動(dòng)畫(huà)屬性，可以輕松的實(shí)現(xiàn)這種動(dòng)畫(huà)效果。

.spinner{
display:inline-block; 
width:20px; 
height:20px;
border-radius:50%;
border:3px solid rgba(255,255,255,0.3);
border-top-color:#fff;
animation:spin 0.8s linear infinite;
}
@keyframes spin{
to{transform:rotate(360deg);}
}

以上的代碼就可以在頁(yè)面上創(chuàng)建一個(gè)簡(jiǎn)單的旋轉(zhuǎn)等待動(dòng)畫(huà)。其中，spinner類定義了該動(dòng)畫(huà)的大小、形狀和邊框?qū)傩裕瑫r(shí)也定義了動(dòng)畫(huà)的持續(xù)時(shí)間和動(dòng)畫(huà)函數(shù)，這個(gè)例子中使用的是linear。

而最重要的部分是spin關(guān)鍵幀動(dòng)畫(huà)。這個(gè)動(dòng)畫(huà)是定義了一個(gè)從0度到360度的旋轉(zhuǎn)過(guò)程。同時(shí)，由于我們?cè)O(shè)置了infinite，所以這個(gè)動(dòng)畫(huà)會(huì)一直重復(fù)播放，直到頁(yè)面加載完畢。

除了上述代碼所定義的旋轉(zhuǎn)等待動(dòng)畫(huà)外，我們還可以利用CSS3的其他屬性（比如縮放、透明度）制作不同的情況下的等待動(dòng)畫(huà)效果。使用這些CSS3的動(dòng)畫(huà)屬性，我們可以創(chuàng)造出更加豐富和多樣的等待動(dòng)畫(huà)效果，優(yōu)化用戶體驗(yàn)。