這是 CSS Loading 設(shè)計的第二篇文章担败，其實很多內(nèi)容都包含在第一篇中，所以這篇文章中對屬性的介紹也會相對少些，如果碰到不明白的屬性鼠渺，請參考上一篇文章中的內(nèi)容。
CSS Loading 設(shè)計（一）
Loading one
這樣看起來沒有任何動畫效果眷细，如果在這里展示我還要用屏幕錄制視屏拦盹，然后轉(zhuǎn)化為圖片，感覺太過于麻煩溪椎，不知道有沒有什么簡便的方法普舆，如果有，請教教我校读。好了沼侣，下面我們看看這個動畫效果該怎么做，首先還是來看看 Html 代碼
<div class="box">
<div class="loader">
<i></i>
<i></i>
<i></i>
</div>
</div>
可見歉秫，這指示兩個 Div 標簽的嵌套蛾洛，十分的簡單，下面就看看 CSS 代碼
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.loader i {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333333;
position: absolute;
opacity:0;
}
可見雁芙，這些代碼和第一篇文章中的幾乎一模一樣轧膘，其實不止是這個效果，接下來的三個效果也都是這么設(shè)計的却特，唯一不同的地方就是動畫的設(shè)計不同扶供。
@-webkit-keyframes loading {
0%{
transform: scale(0);
opacity: 0;
}
5%{
opacity: 1;
}
100%{
transform: scale(1);
opacity:0;
}
}
下面我來解釋一下這個動畫到底是什么意思。
1. 0% ： 這個時候?qū)⑽覀儺嫷膱A形縮放為 0%裂明，透明度也是 0
2. 5% ： 這個時候?qū)⑼该鞫仍O(shè)置為 1 椿浓，也就是圖形是出于可見的狀態(tài)太援，
但是這個時候圖形已經(jīng)被縮放為 0，所以還是什么東西都看不到扳碍。
3. 100% : 注意在 100 % 的狀態(tài)下提岔，圖形被縮放為原始狀態(tài)，但是透明度為0笋敞，這說明了什么碱蒙？
這說明在 5% - 100% 過程中，圖形逐漸出現(xiàn)夯巷，但是透明度逐漸降低赛惩，這樣就會出現(xiàn)一個動畫效果。
好了趁餐，既然動畫效果已經(jīng)定義好了喷兼，那就去給我們的 i 標簽設(shè)置吧。
.loader i:nth-child(1){
-webkit-animation: loading 1s linear 0s infinite;
}
.loader i:nth-child(2){
-webkit-animation: loading 1s linear 0.2s infinite;
}
.loader i:nth-child(3){
-webkit-animation: loading 1s linear 0.4s infinite;
}
好了后雷，到這里第一個動畫效果就出現(xiàn)了季惯。建議親自實踐一下，看一下具體的效果臀突，個人感覺這個動畫還是挺好看的勉抓。
Loading two
說實話，這是本人最喜歡的一個動畫效果候学，十分有趣藕筋。看 Html 代碼
<div class="box">
<div class="loader">
<div class="loader-child">
<i></i>
<i></i>
</div>
</div>
</div>
這里的 CSS 代碼和上面就有一點差異了梳码，下面我來分析一下
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 200px;
margin: 50px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child {
width: 40px;
height: 40px;
position: relative;
}
.loader-child i {
display: block;
border: 2px solid #333333;
border-color: transparent #333333;
border-radius: 50%;
position: absolute;
}
.loader-child i:first-child {
width: 35px;
height: 35px;
top: 0;
left: 0;
-webkit-animation: loading 1s ease-in-out 0s infinite;
}
.loader-child i:last-child {
width: 15px;
height: 15px;
top: 10px;
left: 10px;
-webkit-animation: loading 1s ease-in-out 0.5s infinite reverse;
}
可見在第四個塊中有這么一行代碼 border-color: transparent #333333; 本來我們設(shè)定的是畫一個圓形念逞，由于我們需要的并不是一個圓形，設(shè)置了這行屬性之后边翁，就會每隔 1/4 個圓弧變換顏色屬性，也就是透明和 #333333 進行變化硕盹，就達到了我們想要的圖形效果符匾。
還有，我們針對每個 i 標簽設(shè)置了 top,left 屬性瘩例，這兩個屬性需要配合 position 進行使用啊胶，具體怎么使用我們也在上一篇文章做了介紹，設(shè)置了這么兩個屬性之后垛贤，達到的效果就是一個大圓包含一個小圓焰坪，也就是圖片中的效果。
注意看 last-child 動畫效果聘惦，我們在末尾加上了一個 reverse, 意思就是逆時針執(zhí)行某饰。
好了，下面我們來看看動畫
@-webkit-keyframes loading {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.6);
}
100% {
transform: rotate(360deg) scale(1);
}
}
動畫是怎么樣一個效果，結(jié)合我上面對動畫的執(zhí)行分析黔漂，你可能就已經(jīng)能模擬出這個動畫的效果了诫尽，是的，非常炫酷的一個效果炬守。
Loading three
這個動畫我感覺非常的難牧嫉，由于我接觸 CSS 也才幾天光景，很多屬性的設(shè)置我都不明所以然减途，一直在網(wǎng)上搜尋各種資料酣藻，直到現(xiàn)在理解的也不是很透徹，下面就將我所掌握的分享一下鳍置，至于那些我也不太清楚地屬性辽剧，還希望各路大仙教教我。還是老樣子墓捻，先來看看 HTML 代碼
<div class="box">
<div class="loader">
<div class="loader-child">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
可以很明顯的看到抖仅，這里多包涵了一層 div 標簽，主要是為了配合 position 屬性的使用砖第。
.box{
width: 100%;
padding: 3%;
}
.loader{
width:30%;
height: 200px;
border: 1px solid chocolate;
box-sizing: border-box;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.loader-child{
width: 80px;
height: 20px;
position: relative;
}
.loader-child i{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333333;
margin-right: 10px;
position: absolute;
}
這個時候我們雖然有 5 個 i 標簽撤卢，但是卻只能看到一個圓形，不是預(yù)期的 5 個梧兼，這是這么回事放吩？我也不太清楚。
下面來看看動畫效果
@-webkit-keyframes loading {
0%{
left: 100px;
top: 0;
}
80%{
left:0;
top:0;
}
85%{
left:0px;
top:-20px;
width: 20px;
height: 20px;
}
90%{
width: 40px;
height: 20px;
}
95%{
left: 100px;
top: -20px;
width: 20px;
height: 20px;
}
100%{
left: 100px;
top:0;
}
}
1. 0% - 80% ： 圖形從距離父元素左邊距為 100 px 的位置移動到 0 px羽杰，上邊距不變渡紫，也就是水平移動。
2. 80% - 85% ： 圖形的左邊距不變考赛，但是上移 20 px惕澎，而且圖形的寬高設(shè)置為 20px
3. 85% - 90% : 圖形的位置不變化，但是此時圖形的寬拓寬到 40px
4. 90% - 95% ： 圖形開始向右移動颜骤，移動100 px并且將寬復(fù)原為 20px
5. 95% - 100% ： 圖形回到起始位置唧喉。
下面就是對每個元素設(shè)置動畫效果
.loader-child i:nth-child(1){
-webkit-animation: loading 2s linear 0s infinite;
}
.loader-child i:nth-child(2){
-webkit-animation: loading 2s linear -0.4s infinite;
}
.loader-child i:nth-child(3){
-webkit-animation: loading 2s linear -0.8s infinite;
}
.loader-child i:nth-child(4){
-webkit-animation: loading 2s linear -1.2s infinite;
}
.loader-child i:nth-child(5){
-webkit-animation: loading 2s linear -1.6s infinite;
}
好了，就講到這里忍抽，歡迎反饋八孝，互相學習。
