在現(xiàn)代網(wǎng)頁設(shè)計(jì)中，預(yù)加載是一種很常見的情形。作為用戶，我們希望網(wǎng)頁快速并且流暢 — 我們不喜歡等待。當(dāng)內(nèi)容被加載時(shí)，預(yù)加載能提供視覺反饋，并管理用戶期望，降低用戶放棄瀏覽網(wǎng)站的幾率。

源文件代碼：MissYuan_源文件.rar

用CSS3創(chuàng)建預(yù)加載動(dòng)畫的準(zhǔn)備條件

在我們深入CSS3，創(chuàng)建預(yù)加載動(dòng)畫集之前，我們先討論一些CSS3中非常重要的屬性。

偽元素（Pseudo Elements）:before :after

偽元素在用CSS3創(chuàng)建預(yù)加載動(dòng)畫的過程中是非常有用的。偽元素在本質(zhì)上是在HTML元素之前或之后添加一個(gè)假元素。

“偽來源于希臘語pseudēs，意思是假的。”

這類似于我們創(chuàng)建一個(gè)額外的并不真正存在的元素。不管怎么說，偽元素可以使用CSS樣式。雖然偽元素在創(chuàng)建預(yù)加載動(dòng)畫過程中不是必需的，但在使用最少標(biāo)簽問題上發(fā)揮了作用。

偽元素和其它任何HTML元素一樣，可以被定義樣式，唯一不同的是，偽元素必須定義content屬性。沒有指定content屬性，偽元素是不會(huì)顯示的。Content屬性可以包含任何的文字，例如在預(yù)加載動(dòng)畫里的“loading”字樣。然而，假如你不需要任何文字的話，內(nèi)容可以為空。

CSS3動(dòng)畫（Animation）

在創(chuàng)建CSS3預(yù)加載時(shí)，CSS偽元素是有用的但卻非必需的，然而animation屬性卻是必需的。沒有它，預(yù)加載只是一個(gè)靜態(tài)的展示，無法動(dòng)態(tài)呈現(xiàn)。

“當(dāng)創(chuàng)建動(dòng)畫時(shí)，CSS動(dòng)畫的主要組件是@keyframes。可以將@keyframes看作是一條時(shí)間軸。在@keyframes里，你可以定義這些階段，每一階段都能有不同的風(fēng)格聲明。”——初學(xué)者對(duì)CSS動(dòng)畫的定義

備注：在我們進(jìn)行以下演示之前要注意的是，特定的前綴沒有包含在以下的代碼片段中。如果你需要特定的前綴，那么請(qǐng)參閱codepen例子。

1.音頻波

這個(gè)預(yù)加載的想法源于創(chuàng)建一個(gè)類似于音頻波的動(dòng)畫。

HTML

這是通過創(chuàng)建五個(gè)span標(biāo)簽來實(shí)現(xiàn)的，每一個(gè)標(biāo)簽代表一個(gè)音頻條。

CSS

動(dòng)畫效果是通過每個(gè)span的高度從5px增長到30px來實(shí)現(xiàn)的，span從中央向Y軸方向變化15px實(shí)現(xiàn)了這種效果。

默認(rèn)情況下，每個(gè)span的動(dòng)畫是在同一時(shí)刻發(fā)生的。墨西哥波效果是通過為每個(gè)span添加animation-delay屬性延遲2毫秒實(shí)現(xiàn)的。每個(gè)span是通過nth-child()選擇器進(jìn)行定位的。

2.圓形方塊

這種預(yù)加載使用四個(gè)方塊，移動(dòng)、旋轉(zhuǎn)、改變顏色最后變成圓形。

HTML

這個(gè)預(yù)加載是使用四個(gè)span創(chuàng)建的。每一個(gè)span是一個(gè)圓/方，都有其相應(yīng)的動(dòng)畫。

CSS

這四個(gè)span從方形變?yōu)閳A形是通過調(diào)整border-radius從0px(方)到20px(圓)來實(shí)現(xiàn)的。

每一個(gè)形狀都相對(duì)于其當(dāng)前的位置沿著X&Y軸向相反的方向旋轉(zhuǎn)移動(dòng)。每一個(gè)span的顏色也都從統(tǒng)一的紫色動(dòng)態(tài)轉(zhuǎn)變?yōu)樽约禾赜械念伾�。最終給人的印象就是將幾個(gè)圓形合并為一個(gè)方形。

3.交叉的形狀

交叉形狀預(yù)加載只使用了單個(gè)的div，再加上我們之前談到的:before和:after偽元素。

(原圖鏈接)

HTML

CSS

一個(gè)動(dòng)畫是基于#preloader_3:befor的，另一個(gè)動(dòng)畫是基于#preloader_3:after的。每個(gè)動(dòng)畫在相反的時(shí)間變化成不同的顏色。類似于前面講到的預(yù)加載動(dòng)畫，每一個(gè)偽元素采用border-radius屬性從圓形變?yōu)榉叫巍?/p>

4.蛇形動(dòng)畫

蛇形動(dòng)畫由一系列被設(shè)計(jì)為圓的span組成。

(原圖鏈接)

HTML

這里注明一下，你可以使用僅有3個(gè)圓組成的蛇形預(yù)加載動(dòng)畫，這樣的話，你就只需要一個(gè)#preloader_4 div，再加上:before和:after。

CSS

蛇形預(yù)加載動(dòng)畫是通過調(diào)整每一個(gè)span在Y軸上的坐標(biāo)變化-10px以及調(diào)整顏色由藍(lán)變黃來實(shí)現(xiàn)的。為每一個(gè)span添加大小從0px變?yōu)?0px的投影來創(chuàng)建底層陰影。

與pre-loader1類似，波形效果是通過為每個(gè)span添加animation-delay屬性，使每個(gè)span動(dòng)畫相對(duì)于前面的span延遲2毫秒來實(shí)現(xiàn)的。

5.旋轉(zhuǎn)圓盤

這是……一個(gè)旋轉(zhuǎn)的東西。

HTML

這里我們簡單地為中央的圓形創(chuàng)建了一個(gè)div，通過div的:after偽類創(chuàng)建外部的邊線。

CSS

通過為div的偽類:after添加一條上描邊和一條下描邊，并添加50px的border-radius來創(chuàng)建兩條外部邊線。為主div添加動(dòng)畫效果，僅是改變主div的顏色，并通過添加transform: rotate()來實(shí)現(xiàn)旋轉(zhuǎn)效果。:after偽類動(dòng)畫就是旋轉(zhuǎn)著改變外框的顏色。

6.閃爍的窗口

我們這個(gè)動(dòng)畫有點(diǎn)“微軟”……

(原圖鏈接)

HTML

這個(gè)預(yù)加載動(dòng)畫使用一個(gè)div加四個(gè)span來創(chuàng)建。

CSS

這些方塊排列在一個(gè)柵格中。整個(gè)預(yù)加載動(dòng)畫是通過添加到主div上的旋轉(zhuǎn)動(dòng)畫實(shí)現(xiàn)的。另外添加到span上的動(dòng)畫是將大小從100%縮小到50%，然后我們?yōu)槊恳粋�(gè)span添加animation-delay來創(chuàng)建脈沖效果。

結(jié)語

使用CSS3創(chuàng)建預(yù)加載動(dòng)畫較圖片預(yù)加載動(dòng)畫的優(yōu)勢是——它是可伸縮的、視網(wǎng)膜級(jí)的。這意味著，不管在什么設(shè)備上展示，它們永遠(yuǎn)是清晰的、干凈的、有前瞻性的(盡管如此，仍要記住，并不是所有遺留的瀏覽器都支持CSS3動(dòng)畫)。

在了解CSS3一些重要的屬性和技巧之后，你可以創(chuàng)建自己的CSS3預(yù)加載動(dòng)畫了。你可以創(chuàng)建有趣且酷的動(dòng)畫來減少用戶的流失。

如果你創(chuàng)建了非常酷的預(yù)加載動(dòng)畫，我非常樂意欣賞。在下面盡情留下你的評(píng)論吧。