百度前端技術(shù)學(xué)院2017于2月24日開始進(jìn)行礼华，一共有6個學(xué)院可供學(xué)習(xí)育特，分別是小薇學(xué)院（html/css基礎(chǔ)）、斌斌學(xué)院（js基礎(chǔ)）乏梁、耀耀學(xué)院（小游戲/交互）、商業(yè)平臺學(xué)院（web/ios/android）收奔、ECharts & WebVR學(xué)院（VR相關(guān)）和糯米學(xué)院（css3/vue等）掌呜，從百度前端技術(shù)學(xué)院今年推出的各學(xué)院任務(wù)看來，目前互聯(lián)網(wǎng)行業(yè)對從事前端行業(yè)的程序員要求越發(fā)高了坪哄。轉(zhuǎn)行前端或是才開始學(xué)習(xí)前端的同學(xué)任重而道遠(yuǎn)，大家一起加油，共勉翩肌。
《CSS3圓餅loading效果》作為糯米學(xué)院中的進(jìn)階任務(wù)模暗，目的主要是讓學(xué)員通過完成任務(wù)，掌握border-radius屬性的使用以及旋轉(zhuǎn)動畫的設(shè)置念祭。在已經(jīng)完成鼠標(biāo)懸浮效果任務(wù)之后兑宇，相對來說本任務(wù)要簡單很多。以下是總結(jié)粱坤。
任務(wù)分解：該任務(wù)要達(dá)到的效果隶糕。如網(wǎng)頁中顯示情況，可將任務(wù)分解為兩個小任務(wù)：
1.制作四分之三圓環(huán)并旋轉(zhuǎn)站玄；
2.制作圓餅枚驻，圓餅內(nèi)有兩種顏色，分別交替旋轉(zhuǎn)擴(kuò)大其扇形區(qū)域（從0deg到到360deg）株旷，以達(dá)到圓餅loading效果再登。
通過完成任務(wù)，使用到如下一些重要屬性：
1.制作圓環(huán)晾剖，使用偽元素锉矢，使用border(包括其transparent值)；
2.制作圓餅過程中齿尽，使用到animation-timing-function屬性的steps()曲線沽损；
3.圓餅及圓環(huán)的旋轉(zhuǎn)，使用animation系列屬性循头，并使用transform設(shè)置旋轉(zhuǎn)角度缠俺，使用transform-origin屬性設(shè)置旋轉(zhuǎn)中心。
以下是完成本任務(wù)后的html結(jié)構(gòu)：
<header>
<h1><a >小星的博客|Small Star's Blog</a></h1>
<ul>
<li><a href="#top-bottom1">點我</a></li>
<li><a href="#top-bottom2">快點我</a></li>
<li><a href="#top-bottom3">點我吧</a></li>
<li><a href="#top-bottom4">點我啦</a></li>
</ul>
</header>
<article>
<p class="round1">
<span class="bgcircle">
<span class="left"><span class="spining"></span></span>
<span class="right"><span class="spining"></span></span>
</span>
</p>
<p class="round2">
<span class="bgcircle">
<span class="inner">
<span class="spiner"></span>
<span class="filler"></span>
<span class="masker"></span>
</span>
<span class="inner2">
<span class="spiner"></span>
<span class="filler"></span>
<span class="masker"></span>
</span>
</span>
</p>
</article>
<footer>
<p>版權(quán)所有 © 小星</p>
</footer>
</body>
</html>
其中贷岸，round1為使用第一種方法制作圓餅時的loading整體結(jié)構(gòu)壹士，round2為使用第二種方法制作圓餅時的loading整體結(jié)構(gòu)〕ゾ可以明顯發(fā)現(xiàn)round2方法結(jié)構(gòu)復(fù)雜躏救，實際上其實現(xiàn)方法也較round1方法笨拙。結(jié)構(gòu)樣式代碼請見文末demo代碼地址螟蒸。頁面圖如下：
圓環(huán)及圓餅制作原理如下：
1.四分之三圓環(huán)的旋轉(zhuǎn)：
實現(xiàn)原理：首先將上文html結(jié)構(gòu)中的類名為bgcircle的span元素設(shè)置為圓形（將其border-radius設(shè)置為50%即可）盒使，其寬高大于兩個子元素span，以便圓環(huán)與圓餅分開七嫌。在.bgcircle上設(shè)置偽元素少办，同樣設(shè)置為圓形，大小與.bgcircle相同诵原，再設(shè)置偽元素邊框英妓，其中任一邊框設(shè)置為transparent即可挽放。最后利用animotion和transform設(shè)置旋轉(zhuǎn)動畫。css代碼如下：
/*2-1-1.制作大圓背景*/
.bgcircle{
position:relative;
display:inline-block;
height:80px;
width:80px;
margin:50% 0 0 50%;
top:-30px;
left:-30px;
border-radius:50%;
overflow:hidden;
}
/*2-2.loading圓環(huán)*/
.bgcircle::before{
content:"";
position:absolute;
width:100%;
height:100%;
box-sizing:border-box;
border:4px solid #BD50A3;
border-top:4px solid transparent;
border-radius:50%;
-webkit-animation:circle-spining 4s infinite linear;
animation:circle-spining 4s infinite linear;
-webkit-transform-origin:50% 50% 0;
transform-origin:50% 50% 0;
}
@keyframes circle-spining{
0%{transform:rotate(0deg);}
50%{transform:rotate(-180deg);}
100%{transform:rotate(-360deg);}
}
@-webkit-keyframes circle-spining{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(-180deg);}
100%{-webkit-transform:rotate(-360deg);}
}
2.圓餅旋轉(zhuǎn)：
÷馈（1）方法一：主要參考codepen網(wǎng)站中Geoffrey Crofte的CSS Loaderdemo辑畦，其中也寫了一些其他loading效果⊥纫校總體來說纯出，這些loading效果的主要原理都是：在.bgcircle之下，設(shè)置.left敷燎、.right為左右半圓暂筝，拼接為一個圓餅，對.left硬贯，設(shè)置其子元素.spining往右移至.right區(qū)域焕襟，并形成半圓與.right區(qū)域重疊，此時只有.spining旋轉(zhuǎn)至.left區(qū)域時才能顯示出來澄成。同理胧洒，設(shè)置了.right的子元素.spining。最后墨状，對兩個.spining子元素設(shè)置不同的旋轉(zhuǎn)動畫已達(dá)到要求效果卫漫。css代碼過長，請見文末demo代碼地址肾砂，其旋轉(zhuǎn)過程如下步驟表述：
a.初始狀態(tài)下列赎，兩個.spining都沒有旋轉(zhuǎn)（圖中深紫色圓餅）：此時.left.spining圍繞圓心開始逆時針旋轉(zhuǎn)，至-180deg：
b.“.left.spining”圍繞圓心開始逆時針旋轉(zhuǎn)镐确，至-180deg（圖中淺紫色半圓）：
c.“.left.spining”停止旋轉(zhuǎn)包吝，“.right.spining”開始旋轉(zhuǎn)至-180deg，此時兩個.spining都顯示出來了源葫，形成淺紫色圓餅：
d.“.right.spining”停止旋轉(zhuǎn)诗越，“.left.spining”又開始旋轉(zhuǎn)，從-180deg旋轉(zhuǎn)至-360deg息堂，此時只剩下“.right.spining”形成的淺紫色右半圓：
e.“.left.spining”一周的旋轉(zhuǎn)動畫結(jié)束嚷狞，停止旋轉(zhuǎn)；“.right.spining”開始最后半周的旋轉(zhuǎn)荣堰，至-360deg停止床未。整個一周的動畫結(jié)束。對此動畫設(shè)置無限循環(huán)次數(shù)振坚，即可達(dá)到最終效果薇搁。
（2）方法二：參考張鑫旭博客的文章CSS3實現(xiàn)雞蛋餅餅狀圖loading等待轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)，在張鑫旭前輩的這篇文章里渡八，利用比喻把他的方法原理表述的很清楚啃洋，簡單來說：他將動畫分成了兩半传货，如果以本文前面頁面圖中右邊的圓餅作為例子的話，前半動畫是深藍(lán)色由12點鐘位置開始逆時針旋轉(zhuǎn)至-360deg裂允，最后將橙色覆蓋损离；后半動畫剛好相反哥艇，橙色由12點鐘位置開始逆時針旋轉(zhuǎn)至-360deg绝编，最后將深藍(lán)色覆蓋。由于兩半部分動畫的過程是相同的貌踏，所以將前半部分動畫制作完成后十饥，將該動畫過程復(fù)制一份，將顏色對調(diào)祖乳，重新套入相同結(jié)構(gòu)的新元素中逗堵，再將新的一套重疊在舊一套元素所占區(qū)域，設(shè)置前半段時間第一套元素顯示眷昆、第二套元素透明蜒秤，后半段時間第二套元素顯示、第一套元素透明亚斋。這樣就完成了圓餅loading效果作媚。
下面以前半部分動畫為例表述下動畫過程：
首先需要了解html結(jié)構(gòu)（以本文開始所列html結(jié)構(gòu)為例），設(shè)置類名為inner的span作為父元素帅刊，該元素背景為深藍(lán)色纸泡，其下同列三個span作為子元素，類名分別為：spiner赖瞒、filler女揭、masker。以上四者中栏饮，按照原理吧兔，.filler、.masker的z-index應(yīng)該設(shè)置得高于.spiner袍嬉，但在實際設(shè)置中境蔼，張鑫旭前輩沒有設(shè)置z-index值，而是利用在html結(jié)構(gòu)中將需要優(yōu)先顯示的元素并列在后面的方式（如果在html結(jié)構(gòu)中將.masker與.spiner對調(diào)冬竟，就會出現(xiàn)錯誤）欧穴，規(guī)避了這點。.masker為左半圓泵殴，深藍(lán)色涮帘；.filler為右半圓，橙色笑诅；.spiner為旋轉(zhuǎn)半圓调缨，橙色疮鲫，初始位置位于左半部分。
a.初始狀態(tài)：.masker透明弦叶，此時由.spiner和.filler分別位于左右方拼接成橙色圓餅：
b.此時俊犯，.spiner開始圍繞圓心逆時針旋轉(zhuǎn)，則作為父元素的.inner開始從12點鐘方向逆時針顯露（深藍(lán)色）伤哺，到.spiner旋轉(zhuǎn)-180deg時燕侠，.masker由透明變?yōu)轱@示，.filler由顯示變?yōu)橥该鳎?/p>
c.之后立莉，.spiner繼續(xù)逆時針旋轉(zhuǎn)绢彤，由于.filler已經(jīng)透明，則.inner從6點鐘方向逆時針顯露蜓耻，而左半圓區(qū)域由于.masker已經(jīng)顯示（z-index值比.spiner大）茫舶，也為深藍(lán)色，這樣刹淌，當(dāng).spiner旋轉(zhuǎn)一周之后饶氏，就由橙色全部變?yōu)樗{(lán)色：
以上為動畫原理，css代碼過長有勾，請見文末demo代碼地址疹启。在實現(xiàn)這個方法的過程中，還需要注意柠衅，要變化透明度的元素（.inner/.inner2/.masker/.filler）皮仁，其透明度變化并不是漸變，而是突變菲宴，所以需要設(shè)置animation-timing-function為steps()突變曲線贷祈，steps(n,start/end)主要有兩個值，簡單來說喝峦，n設(shè)置突變次數(shù)（整數(shù)）势誊，start/end設(shè)置在動畫開始還是結(jié)束突變。
思考：
1.利用steps()曲線谣蠢，可以制作一些更炫酷的css3動畫粟耻。并且，在同一個方向上連續(xù)漸變的動畫眉踱，由于漸變位置不同挤忙，通常需要兩個以上元素實現(xiàn)，但利用steps()曲線突變位置谈喳，就能通過一個元素實現(xiàn)了册烈；
2.完成以上任務(wù)之后，可以優(yōu)化的地方：第一個方法中的.spining子元素婿禽，可以使用偽元素替代赏僧；同理大猛，第二個方法中的子元素，也可用偽元素替代淀零；
3.圓環(huán)除了定長旋轉(zhuǎn)挽绩，也可根據(jù)圓餅loading旋轉(zhuǎn)的方法，實現(xiàn)變長旋轉(zhuǎn)loading效果驾中。
具體參考已在文中引出唉堪，不再單列，以下為我的demo及demo代碼：
