（一）牛人动效
[Lloyd James](http://codepen.io/LloydJames)
[Tatsuya Azegami](http://codepen.io/42EG4M1)
[BY Ana Tudor](http://codepen.io/thebabydino)
（二）动效制作与详解（详解见代码块中的注释！！！）
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;}
/* *号是通配符，是多有标签都有的属性 ,box-sizing:border-box并排放置两个带边框的框*/
body{
margin:0;
display:flex;justify-content:center;align-items:center;
height:100vh;
background:#343C4C;
}
/*display:flex;弹性布局,允许在容器里弹性伸缩；align-items:center根据页面宽高有弹性的垂直居中，justify-content: center随着页面宽高有弹性的水平居中,height:100vh界面实际高度有多高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父级相对定位，position:absolute子级绝对定位,nth-child(1)匹配属于其父元素的第N个子元素,这里找到的是第一个span*/
2.加入动画
代码如下
@-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％是时间，｛｝变化的状态*/
/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/
结束（下期更精彩哟～～～）
