（一）牛人動(dòng)效

[Lloyd James](http://codepen.io/LloydJames)

[Tatsuya Azegami](http://codepen.io/42EG4M1)

[BY Ana Tudor](http://codepen.io/thebabydino)

（二）動(dòng)效制作與詳解（詳解見代碼塊中的注釋?。。。?/h3>

loading（最終效果）

1.搭建基本形狀

（代碼如下）

HTML

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

*{box-sizing:border-box;border-radius: 0px 0px 30px 30px;}
/* *號(hào)是通配符，是多有標(biāo)簽都有的屬性 ,box-sizing:border-box并排放置兩個(gè)帶邊框的框*/
body{
    margin:0;
    display:flex;justify-content:center;align-items:center;
    height:100vh;
    background:#343C4C;
    }
/*display:flex;彈性布局,允許在容器里彈性伸縮；align-items:center根據(jù)頁(yè)面寬高有彈性的垂直居中，justify-content: center隨著頁(yè)面寬高有彈性的水平居中,height:100vh界面實(shí)際高度有多高body的高度就有多高 */
.loader{
    width: 50px;height:50px;
    position:relative;
    -webkit-animation: loader 2s  ease-in-out infinite;
    }
.loader span{
    width: 50px;height:50px;
    position:absolute;left:0;top:0;
    border: 4px solid #343C4C;
}

.loader:before{
    content:"";
    display:block;
    background:#282e3a;
    width:30px;
    height:30px;
    margin:10px auto;
    border-radius: 30px 30px 30px 30px;
    -webkit-animation:beforeAnimation 2s infinite;
}
.loader span:nth-child(1){
    -webkit-animation: span-1 2s ease-in-out infinite;
}
.loader span:nth-child(2){
    -webkit-animation: span-2 2s ease-in-out infinite;
}
.loader span:nth-child(3){
    -webkit-animation: span-3 2s ease-in-out infinite;
}
.loader span:nth-child(4){
    -webkit-animation: span-4 2s ease-in-out infinite;
}
/* position:relative父級(jí)相對(duì)定位，position:absolute子級(jí)絕對(duì)定位,nth-child(1)匹配屬于其父元素的第N個(gè)子元素,這里找到的是第一個(gè)span*/

2.加入動(dòng)畫

代碼如下

@-webkit-keyframes span-1{
    0%{-webkit-transform:translate(0);}
    50%{-webkit-transform:translate(-50px,0);border-color:#EE4D68;}
    100%{-webkit-transform:translate(0);}
}
@-webkit-keyframes span-2{
    0%{-webkit-transform:translate(0);}
    50%{-webkit-transform:translate(50px,0);border-color:#876578;}
    100%{-webkit-transform:translate(0);}
}
@-webkit-keyframes span-3{
    0%{-webkit-transform:translate(0);}
    50%{-webkit-transform:translate(0,50px);border-color:#28BA99;}
    100%{-webkit-transform:translate(0);}
}
@-webkit-keyframes span-4{
    0%{-webkit-transform:translate(0);}
    50%{-webkit-transform:translate(0px,-50px);border-color:#DFCB38;}
    100%{-webkit-transform:translate(0);}
}

@-webkit-keyframes loader{
    0%{-webkit-transform:rotate(-45deg);}
    50%{-webkit-transform:rotate(145deg);}
    100%{-webkit-transform:rotate(-45deg); }    
}
@-webkit-keyframes beforeAnimation{
    0%{-webkit-transform:rotate(0deg);background:skyblue;}
    50%{-webkit-transform:rotate(180deg);background:tomato;}
    100%{-webkit-transform:rotate(0deg); background:skyblue;}   
}
/* 0％ 50％ 100％是時(shí)間，｛｝變化的狀態(tài)*/

/友情提示：如果覺得此文有難度，請(qǐng)看小編之前文章（難度較低）或自行洗洗睡了～/

結(jié)束（下期更精彩喲～～～）