CSS預(yù)加載動畫是什么呢？我們平常在網(wǎng)頁加載的時候，有時會看到頁面出現(xiàn)了一些加載動畫或者轉(zhuǎn)圈圈的效果，這就是CSS預(yù)加載動畫。它在客戶端執(zhí)行，無需后臺處理，能夠幫助我們更好的優(yōu)化用戶體驗。

<style>
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 40px;
color: #666;
text-indent: -10000px;/*讓文本看不見*/
width: 1em;
height: 1em;
border-radius: 50%;
border: .1em solid rgba(102, 102, 102, .2);/*lightgray*/
border-left-color: rgba(51, 122, 183, .8);/*DodgerBlue*/
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
</style>
</pre>
我們來看一下上面的代碼，其中我們定義了一個class名為loading的元素，它的CSS屬性值中有：
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
這里我們設(shè)置了它的位置居中，并設(shè)置了z-index，保證它能處于最上層，覆蓋其他內(nèi)容。
font-size: 40px;
color: #666;
text-indent: -10000px;/*讓文本看不見*/
width: 1em;
height: 1em;
border-radius: 50%;
border: .1em solid rgba(102, 102, 102, .2);/*lightgray*/
border-left-color: rgba(51, 122, 183, .8);/*DodgerBlue*/
animation: rotate 2s linear infinite;
這里我們設(shè)置加載動畫的樣式：
font-size：字體大小
color：字體顏色
text-indent：讓文本隱藏在元素外，避免文字出現(xiàn)
width、height：設(shè)定圓的大小
border-radius：設(shè)定圓的形狀為圓形
border：設(shè)定圓環(huán)的寬度和顏色
animation：設(shè)定動畫名稱為rotate，設(shè)定動畫變化時長為2s，設(shè)定動畫速度為線性變化，設(shè)定動畫無限重復(fù)
最后，我們再使用pre標簽放置一下完整的代碼：
<div class="loading">Loading...</div>
<style>
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 40px;
color: #666;
text-indent: -10000px;/*讓文本看不見*/
width: 1em;
height: 1em;
border-radius: 50%;
border: .1em solid rgba(102, 102, 102, .2);/*lightgray*/
border-left-color: rgba(51, 122, 183, .8);/*DodgerBlue*/
animation: rotate 2s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
</style>
CSS預(yù)加載動畫就是這樣的，它可以讓用戶在等待頁面加載的時候感覺到有一個反饋，知道頁面正在加載中，并且?guī)椭覀兏玫貎?yōu)化用戶體驗。