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

.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%;
/*動畫關(guān)鍵幀*/
animation: rotate 1s linear infinite;
}
/*動畫效果*/
@keyframes rotate {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

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

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