动效篇（3）－－CSS极简动效鉴赏与制作

（一）牛人动效

[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％是时间，｛｝变化的状态*/

/友情提示：如果觉得此文有难度，请看小编之前文章（难度较低）或自行洗洗睡了～/

结束（下期更精彩哟～～～）