（一）動效鑒賞

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>

結束（下期更精彩喲～～～）