动效篇（2）－－CSS极简动效鉴赏与制作（良心制作～）

（一）动效鉴赏

BY Jack Oliver BY Siyoung Park BY Scott Galloway BY Elena

（二）动效制作与详解（详解见代码块中的注释！！！）

动效作品相机（最终效果）

1.搭建基本形状

（代码如下）

body{
    background-color:#343C4C;min-width: 800px;min-height:400px;
}
/*定义背景颜色和最小宽高*/
.flat-anim{
    display:block; position:absolute; width:264px; height:265px; 
    background:#6FDABB; border-radius:42px; top:50%; left:50%; 
    margin:-132px 0 0 -132px;
    -webkit-box-shadow:      
         0 12px 0 -6px rgba(0,0,0,0.2); 
}
/*display:block; 让对象成为块级元素，一般都是用display:none和display:block来控制层的显示。
position:absolute；绝对定位，是将div的位置固定的，也就是用浏览器的绝对位置的显示div，
border-radius圆角半径，-webkit-box-shadow:对象的阴影设置（相机镜头的同心圆都是用阴影来写的）*/
.flat-anim:before{ 
    content:""; background-color:#282e3a; width:26px; height:26px; 
    border-radius:26px; position:absolute; top:20px; left:20px;
    -webkit-box-shadow:
         0 0 0 2px #1A4B46,
         0 0 0 4px #282e3a,
         0 6px 0 6px rgba(0,0,0,0);
}
/*content:"";插入内容，不写这句话，整个代码块是不会起作用的。*/
.flat-anim:after{ 
    content:""; 
    background-color:#C72E31; width:44px; height:20px; 
    border-radius:8px; position:absolute; 
    top:20px; right:24px;
}
.eye{ 
    width:38px; height:38px; border-radius:38px; 
    background:#1E3E3C; display:block; margin:60px auto ; 
    z-index:20; position: relative; 
    -webkit-box-shadow: 
         0 0 0 22px #1A4B46,
         0 0 0 30px #1E3E3C, 
         0 0 0 45px #ecf0f1,
         0 10px 0 45px rgba(0,0,0,0.2);
}
.eye:before{
    content:"";
    background:#568E7C;width:30px;height:30px;
    border-radius:30px;position:absolute;
    top:-16px;left:-16px;
}
.eye:after{
    content:'';background:#266C67;
    width:16px;height:16px;position:absolute; 
    top:30px; left:30px; border-radius:16px;
}

.bottom{
    width:264px; height:112px; display:block; 
    position:absolute; z-index:10; 
    background:#D94C4E; border-radius: 0 0 38px 38px; 
    bottom:0; left:0; border-top:15px solid #C72E31;
}
.bottom:before{
    content:"";display:block;background:#282e3a;
    width:140px;height:30px;margin:14px auto;

}
.bottom:after{
    content:""; position:absolute; 
    top:30px; left:84px; 
    width:96px; height:70px; 
    display:block; background: #ecf0f1;
    border-top:8px solid #c3d1dd;
    border-bottom:14px solid #C72E31;

}

2.制作上半部镜头动画

（代码如下）

.eye,
.flat-anim:before,
.flat-anim:after {
    -webkit-animation: eyeAnimation 5s infinite;
}

.flat-anim:before{
    -webkit-animation-delay: 50ms;
    -moz-animation-delay: 50ms;
    -o-animation-delay: 50ms;
    animation-delay: 50ms;
}
/*animation-delay动画延迟，-moz-（Firefox浏览器） ，-o（Opera浏览器），-webkit（Safari 和 Chrome浏览器）是为了浏览器的兼容，所以一定要写全。*/
.flat-anim:after{
    -webkit-animation-delay: 150ms;
    -moz-animation-delay: 150ms;
    -o-animation-delay: 150ms;
    animation-delay: 150ms;
}
@-webkit-keyframes eyeAnimation{
    0%{ opacity:0; -webkit-transform:scale(0.1);}
    12%{ opacity:0; -webkit-transform:scale(0.1);}
    13%{ opacity:1; -webkit-transform:scale(0.1);}
    20%{ opacity:1; -webkit-transform:scale(1.4);}
    25%{ -webkit-transform:scale(1);}
    95%{ opacity:1; -webkit-transform:scale(1);}
    100%{ opacity:0; -webkit-transform:scale(0.1);}
}
/*@-webkit-keyframes关键帧动画，通过关键帧动画来制作镜头的动效*/

3.制作相机出照片的效果

（代码如下）

.bottom:before{
    -webkit-animation: bottomAnimation 5s infinite;
}
@-webkit-keyframes bottomAnimation{
    0%{ opacity:0; width:0;}
    21%{ opacity:0; width:0;}
    22%{ opacity:1; width:8px;}
    25%{ opacity:1; width:165px;}
    26%{ opacity:1; width:140px;}
    95%{ opacity:1; width:140px;}
    96%{ opacity:0; width:0;}
    100%{ opacity:0; width:0;}      
}

.bottom:after{
    -webkit-animation:bottomAfterAnimation 5s infinite;
}
@-webkit-keyframes bottomAfterAnimation{
    0%{ opacity:0; height:0; border:0;}
    25%{ opacity:0; height:0; border:0;}
    26%{ opacity:1; height:0; border:0;}
    26%{ opacity:1; height:0; border:2;}
    28%{ opacity:1; height:0; border-top-width:16px;}
    28%{ opacity:1; height:40px; border-top-width:16px;border-bottom-width:14px;}
    95%{ opacity:1; height:40px; border-top-width:16px;border-bottom-width:14px;}
    100%{ opacity:0; height:0; border:0;}   
}

4.整体加入旋转动画

（代码如下）

.flat-anim{
    -webkit-animation: flatAnimation 5s infinite;
}
@-webkit-keyframes flatAnimation{
    0%{-webkit-transform: rotate(50deg) scale(0.5);}
    13%{-webkit-transform: rotate(360deg) scale(1.2);}
    20%{-webkit-transform: rotate(360deg) scale(1);}
    95%{-webkit-transform: rotate(360deg) scale(1);}
    100%{-webkit-transform: rotate(410deg) scale(.5);}
}
/*小技巧：尽量把可以写在一起的代码合并，养成良好的习惯，如果动效复杂就注释起来，一部分一部分做*/

5.HTML代码

<div class="flat-anim animation">
    <span class="eye"></span>
    <span class="bottom"></span>
</div>

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