使用CSS3制作餅狀旋轉(zhuǎn)載入效果的實(shí)例

今天,要實(shí)現(xiàn)一個(gè)長任務(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)餅的精髓,可得要好生琢磨一番??!
如果您手頭的是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è)餅位置是長得像雞蛋的假雞蛋和長得像大餅的假大餅。顯然這句話你聽不懂,因?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的元素
- <div class="inner">
- <div class="spiner"></div>
- <div class="filler"></div>
- <div class="masker"></div>
- </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代碼如下:
- @keyframes spin {
- 0% { transform: rotate(360deg); }
- 100% { transform: rotate(0deg); }
- }
因?yàn)槭悄鏁r(shí)針,所以是從360deg到0deg.
前半程出現(xiàn),后半程隱藏,可以借助animation step相關(guān)的timing function實(shí)現(xiàn),代碼如下:
- @keyframes second-half-hide {
- 0% { opacity: 1; }
- 50%, 100% { opacity: 0; }
- }
后半程顯示則是:
- @keyframes second-half-show {
- 0% { opacity: 0; }
- 50%, 100% { opacity: 1; }
- }
于是,我們只要加個(gè)動(dòng)畫時(shí)間,以及無限執(zhí)行就OK啦~~
- .spiner { transform-origin: rightright center; animation: spin .8s infinite linear; }
- .filler { animation: second-half-hide .8s steps(1, end) infinite; }
- .masker { animation: second-half-show .8s steps(1, end) infinite; }
其他細(xì)節(jié)都是定位什么的,很基礎(chǔ)的知識(shí),就不啰嗦啦~~
餅其實(shí)還沒有做好
啊,搗鼓了這么久還沒有結(jié)束?。?/p>
沒錯(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:
- <div class="inner">
- <div class="spiner"></div>
- <div class="filler"></div>
- <div class="masker"></div>
- </div>
- <div class="inner2">
- <div class="spiner"></div>
- <div class="filler"></div>
- <div class="masker"></div>
- </div>
inner和inner2也使用的前后半程隱藏的動(dòng)畫,動(dòng)畫時(shí)間正好是一個(gè)周期的2倍。
- .inner { opacity: 1; animation: second-half-hide 1.6s steps(1, end) infinite; }
- .inner2 { opacity: 0; animation: second-half-show 1.6s steps(1, end) infinite; }
于是,就有了完美的做蛋餅效果了。
相關(guān)文章
- 本篇文章主要介紹了詳解純CSS3制作的20種loading動(dòng)效,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-05
- 這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)10種Loading效果,效果實(shí)現(xiàn)簡單新穎,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-11
CSS3輕松實(shí)現(xiàn)清新 Loading 效果的簡單實(shí)例
下面小編就為大家?guī)硪黄狢SS3輕松實(shí)現(xiàn)清新 Loading 效果的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06淺析與CSS3的loading動(dòng)畫加載相關(guān)的transition優(yōu)化
這篇文章主要介紹了淺析與CSS3的loading動(dòng)畫加載相關(guān)的transition優(yōu)化,包括height等相關(guān)參數(shù)的調(diào)試方法分析,需要的朋友可以參考下2015-05-188款使用 CSS3 實(shí)現(xiàn)超炫的 Loading(加載)的動(dòng)畫效果
本文給大家總結(jié)分享了8款使用 CSS3 實(shí)現(xiàn)超炫的 Loading(加載)的動(dòng)畫效果,十分的炫酷,也非常實(shí)用,這里推薦給小伙伴們,希望大家能夠喜歡。2015-03-17純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果
這篇文章主要介紹了純CSS3實(shí)現(xiàn)的8種Loading動(dòng)畫效果,效果簡潔、超酷、符合當(dāng)前前端的流行風(fēng)格,需要的朋友可以參考下2014-07-05使用css3實(shí)現(xiàn)超炫的loading加載動(dòng)畫效果
這篇文章主要介紹了使用css3實(shí)現(xiàn)超炫的loading加載動(dòng)畫效果,需要的朋友可以參考下2014-05-07css3如何繪制一個(gè)圓圓的loading轉(zhuǎn)圈動(dòng)畫
這篇文章主要介紹了css3如何繪制一個(gè)圓圓的loading圈的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-09