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

<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;
這里我們設置了它的位置居中，并設置了z-index，保證它能處于最上層，覆蓋其他內容。
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;
這里我們設置加載動畫的樣式：
font-size：字體大小
color：字體顏色
text-indent：讓文本隱藏在元素外，避免文字出現
width、height：設定圓的大小
border-radius：設定圓的形狀為圓形
border：設定圓環的寬度和顏色
animation：設定動畫名稱為rotate，設定動畫變化時長為2s，設定動畫速度為線性變化，設定動畫無限重復
最后，我們再使用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預加載動畫就是這樣的，它可以讓用戶在等待頁面加載的時候感覺到有一個反饋，知道頁面正在加載中，并且幫助我們更好地優化用戶體驗。