對(duì)于一個(gè)網(wǎng)站或者應(yīng)用程序來說，加載速度是非常重要的，因?yàn)樗苯佑绊懹脩趔w驗(yàn)。但是有時(shí)候，即使我們已經(jīng)盡可能優(yōu)化了加載速度，仍然不能避免需要加載的內(nèi)容有些過于龐大，而這時(shí)不可避免的需要加上一個(gè)加載中提示，告訴用戶數(shù)據(jù)正在加載中。為了讓這個(gè)加載中的提示更加生動(dòng)，我們可以用CSS3代碼實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的加載中動(dòng)畫。

.spinner{
/*設(shè)置容器寬高*/
width: 40px;
height: 40px;
/*設(shè)置圓圈大小及樣式*/
border: 6px solid rgba(0, 0, 0, 0.15);
border-left-color: rgba(0, 0, 0, 0.8);
border-radius: 50%;
/*動(dòng)畫關(guān)鍵幀*/
animation: rotate 1s linear infinite;
}
/*動(dòng)畫效果*/
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

以上是實(shí)現(xiàn)這個(gè)加載中旋轉(zhuǎn)動(dòng)畫的核心代碼，我們首先需要一個(gè)容器，然后設(shè)置它的大小，并且讓它看起來像一個(gè)圓圈。然后我們通過CSS3的動(dòng)畫效果，實(shí)現(xiàn)旋轉(zhuǎn)一圈的動(dòng)畫。這里需要注意的是，我們?cè)陉P(guān)鍵幀中，需要設(shè)置從0度旋轉(zhuǎn)到360度旋轉(zhuǎn)，這樣才能形成一個(gè)完整的旋轉(zhuǎn)動(dòng)畫。

當(dāng)然，還需要根據(jù)自己的需求來調(diào)整樣式。比如，你可以設(shè)置不同的顏色，調(diào)整大小、速度等等。你也可以靈活運(yùn)用這個(gè)動(dòng)畫，來設(shè)計(jì)其他更復(fù)雜、更有趣的動(dòng)畫效果。