仿網頁nec首頁動畫效果
nec鏈接：http://nec.netease.com/
首先，介紹animation
animation檢索或設置對象所應用的動畫特效。
animation由“keyframes”這個屬性來實現這樣的效果。
keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。

關于animation屬性介紹：
animation-name：檢索或設置對象所應用的動畫名稱
animation-duration：檢索或設置對象動畫的持續時間
animation-timing-function：檢索或設置對象動畫的過渡類型
animation-delay：檢索或設置對象動畫延遲的時間
animation-iteration-count：檢索或設置對象動畫的循環次數
animation-direction：檢索或設置對象動畫在循環中是否反向運動
animation-play-state：檢索或設置對象動畫的狀態。w3c正考慮是否將該屬性移除，因為動畫的狀態可以通過其它的方式實現，比如重設樣式

nec動畫實現原理：
采用三層背景層、氣泡層、文字鏤空層。氣泡層通過animation屬性實現了運動效果。

html結構：

<div class=”kbanner”>
<div class=”knecbg knecone”></div>
<div class=”knecbg knectwo”>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class=”knecbg knecthree”></div>
</div>

css樣式：

.kbanner{
position: relative;
width: 856px;
height: 366px;
background: url(http://huoche.7234.cn/images/jb51/bukz54b1yze.png) center top no-repeat;
}
.knecbg{
position: absolute;
left: 150px;
top: 77px;
width: 487px;
height: 186px;
overflow: hidden;
}
.knecone{
background: url(//files.Vevb.com/file_images/article/201306/o_pao.png) left top no-repeat;
z-index: 1;
}
.knectwo{
z-index: 2;
}
.knecthree{
background: url(//files.Vevb.com/file_images/article/201306/o_pao.png) left bottom no-repeat;
z-index: 3;
}
.knectwo i{
position: absolute;
display: block;
top: -50px;
width: 53px;
height: 56px;
overflow: hidden;
background: url(//files.Vevb.com/file_images/article/201306/o_pao.png) no-repeat -9999px -9999px;
-webkit-animation: paoi 7s 2s infinite;
-moz-animation: paoi 7s 2s infinite;
-ms-animation: paoi 7s 2s infinite;
animation: paoi 7s 2s infinite;
}
.knectwo i:nth-child(1){
left: 25px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;