（一）动效鉴赏
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>
结束（下期更精彩哟～～～）
