如何使用CSS3制作餅狀旋轉(zhuǎn)載入效果

這篇文章主要介紹“如何使用CSS3制作餅狀旋轉(zhuǎn)載入效果”，在日常操作中，相信很多人在如何使用CSS3制作餅狀旋轉(zhuǎn)載入效果問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用CSS3制作餅狀旋轉(zhuǎn)載入效果”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

今天，要實(shí)現(xiàn)一個(gè)長(zhǎng)任務(wù)等待提示效果。

然后設(shè)計(jì)師就把做好的gif效果圖給我，就是下面這個(gè)：

按照大眾做法，我應(yīng)該是把圖片直接按圖索驥，調(diào)調(diào)布局，然后早早回家抱老婆。

但是，我這個(gè)人，天生不安分守己。想到是用在客戶端，客戶端又是用的webkit內(nèi)核，于是，立馬決定使用CSS3來折騰一番。

外面的光環(huán)很好實(shí)現(xiàn)，360度轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)就OK. 但是，中間那個(gè)雞蛋轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的可不是好啃的骨頭啊。人家?guī)煾碉炃耙环昼?，餅下十年功啊?/p>

我生小輩想要習(xí)得這轉(zhuǎn)餅的精髓，可得要好生琢磨一番?。?/p>

如果您手頭的是IE10+這類支持animation的現(xiàn)代瀏覽器，您可以狠狠地點(diǎn)擊這里：CSS3餅狀圖loading旋轉(zhuǎn)動(dòng)畫demo

截圖是死的，demo是活的。建議點(diǎn)上面的地址去仔細(xì)對(duì)比CSS3實(shí)現(xiàn)和gif動(dòng)畫效果。

不難發(fā)現(xiàn)，這個(gè)gif尺寸又大，效果也不流暢，還燒性能。相比之下，立馬被CSS3實(shí)現(xiàn)甩出了2條南京路。

CSS3效果更佳、性能更高、資源占用更少大家都認(rèn)同了。關(guān)鍵是，這個(gè)大餅它是怎么轉(zhuǎn)起來的？

略復(fù)雜。
蛋餅旋轉(zhuǎn)技能傳授

師父領(lǐng)進(jìn)門修行在個(gè)人，聽不懂我也沒辦法啦~~

我們?nèi)庋劭瓷先ナ且粋€(gè)雞蛋被攤在了整個(gè)餅上，實(shí)際上，這只是個(gè)障眼法。

實(shí)際攤的雞蛋，只有半個(gè)餅?zāi)敲创?。還有半個(gè)餅位置是長(zhǎng)得像雞蛋的假雞蛋和長(zhǎng)得像大餅的假大餅。顯然這句話你聽不懂，因?yàn)槲易约憾紱]聽懂，哈哈~~所謂一圖勝千言，示意圖走起~

下圖示意的就是雞蛋餅上的雞蛋從100%變小成0的過程。

1. 這是沒有干擾的蛋餅，你看到的是半個(gè)假餅和半個(gè)假蛋。

2. 當(dāng)我們煎餅動(dòng)畫轉(zhuǎn)起的一瞬間，我們讓假的餅子隱藏回家打醬油去。于是，從上面看，我們看到的就是滿滿一層的雞蛋。

3. 真雞蛋轉(zhuǎn)起，你會(huì)發(fā)現(xiàn)，半個(gè)真雞蛋，由于逆時(shí)針旋轉(zhuǎn)，露出了點(diǎn)空（左側(cè)上部）。

demo對(duì)應(yīng)效果類似(淺色看成雞蛋)：

4. 當(dāng)真雞蛋旋轉(zhuǎn)了180度（半圈）的時(shí)候，真假雞蛋正好重合在了一起，于是就是看到的就是蛋餅上半面雞蛋。

demo對(duì)應(yīng)效果類似：

demo對(duì)應(yīng)效果類似：

6. 一直旋轉(zhuǎn)到360度，其完全被假的餅子遮蓋，一點(diǎn)雞蛋都看不到了。完成了從全部都0的動(dòng)畫過程。這就是蛋餅轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)的基本原理。

CSS3表示
可見，要實(shí)現(xiàn)我們想要的蛋餅效果，我們需要這些東西：

    圓形的蛋餅子 – 對(duì)應(yīng)下面類名為inner元素
    旋轉(zhuǎn)的半面真雞蛋 – 對(duì)應(yīng)下面類名為spiner的元素
    不動(dòng)的半面蛋餅子，前半程隱藏，后半程出現(xiàn) – 對(duì)應(yīng)下面類名為masker的元素
    不動(dòng)的半面假雞蛋，前半程出現(xiàn)，后半程隱藏 – 對(duì)應(yīng)下面類名為filler的元素

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="inner">   

2.     <div class="spiner"></div>   

3.     <div class="filler"></div>   

4.     <div class="masker"></div>   

5. </div>  

    inner主要實(shí)現(xiàn)圓以及背景色；
    spiner主要實(shí)現(xiàn)半圓的360度逆時(shí)針旋轉(zhuǎn)，其背景色有別于父元素的背景色；
    filler半圓，定位在右側(cè)，與旋轉(zhuǎn)元素同樣背景色；后面的180度隱藏；
    masker半圓，定位在左側(cè)，與大背景色色值相同；旋轉(zhuǎn)前180度隱藏，之后顯示遮蓋；

其中，360度旋轉(zhuǎn)CSS代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @keyframes spin {   

2.   0%   { transform: rotate(360deg); }   

3.   100% { transform: rotate(0deg); }   

4. }  

因?yàn)槭悄鏁r(shí)針，所以是從360deg到0deg.

前半程出現(xiàn)，后半程隱藏，可以借助animation step相關(guān)的timing function實(shí)現(xiàn)，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @keyframes second-half-hide {   

2.   0%        { opacity: 1; }   

3.   50%, 100% { opacity: 0; }   

4. }  

后半程顯示則是：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @keyframes second-half-show {   

2.   0%        { opacity: 0; }   

3.   50%, 100% { opacity: 1; }   

4. }  

于是，我們只要加個(gè)動(dòng)畫時(shí)間，以及無限執(zhí)行就OK啦~~

CSS Code復(fù)制內(nèi)容到剪貼板

1. .spiner { transform-origin: rightright center; animation: spin .8s infinite linear; }   

2. .filler { animation: second-half-hide .8s steps(1, end) infinite; }   

3. .masker { animation: second-half-show .8s steps(1, end) infinite; }  

其他細(xì)節(jié)都是定位什么的，很基礎(chǔ)的知識(shí)，就不啰嗦啦~~

餅其實(shí)還沒有做好
啊，搗鼓了這么久還沒有結(jié)束??？

沒錯(cuò)。仔細(xì)查看gif動(dòng)畫，你會(huì)發(fā)現(xiàn)，蛋餅它是從全盤都0再到整個(gè)360度覆蓋的。

而，上午搗鼓的動(dòng)畫只是從360度無死角覆蓋到0覆蓋。一旦覆蓋結(jié)束，就又要走360度開始，不連貫，怎么破？

我是這么處理的：
再覆蓋一個(gè)蛋餅從0度到360度展示的動(dòng)畫。與一直搗鼓的動(dòng)畫前后半程分別展示就可以了。

于是，最終有如下HTML:

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="inner">  

2.     <div class="spiner"></div>  

3.     <div class="filler"></div>  

4.     <div class="masker"></div>  

5. </div>  

6. <div class="inner2">  

7.     <div class="spiner"></div>  

8.     <div class="filler"></div>  

9.     <div class="masker"></div>  

10. </div>  

inner和inner2也使用的前后半程隱藏的動(dòng)畫，動(dòng)畫時(shí)間正好是一個(gè)周期的2倍。

CSS Code復(fù)制內(nèi)容到剪貼板

1. .inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; }   

2. .inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }  

于是，就有了完美的做蛋餅效果了。

到此，關(guān)于“如何使用CSS3制作餅狀旋轉(zhuǎn)載入效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！