實現效果：打開手機京東，可以看到首頁的頭部，以這個頭部為基礎，仿寫一個類似的樣式。 思路：仔細觀察可以發現，手機京東的頭部是以一個搜索欄和輪播特效組成的，而這個搜索欄是以輪播特效做為背景的，現在運用css3關鍵幀動畫，可以實現這樣的頭部效果。 測試：首先，寫一個簡單的測試來驗證思路是否正確，這樣可以 ...
實現效果：打開手機京東，可以看到首頁的頭部，以這個頭部為基礎，仿寫一個類似的樣式。
思路：仔細觀察可以發現，手機京東的頭部是以一個搜索欄和輪播特效組成的，而這個搜索欄是以輪播特效做為背景的，現在運用css3關鍵幀動畫，可以實現這樣的頭部效果。
測試：首先，寫一個簡單的測試來驗證思路是否正確，這樣可以排除其他樣式的干擾；測試如下：
1.兩個嵌套的div，內部div1以簡單的文字和圖片模擬的搜索欄
1 <body> 2 <div class="diva"> 3 <div class="div1">頭部 4 <img src="../img/放大鏡.png"> 5 </div> 6 </div> 7 </body>
2.由於動畫的主要原理在於改變背景圖片的位置，這裡先介紹一下background-img，知道的同學自行跳過吧
由url插入圖片
1 div{ 2 width: 300px; 3 height: 200px; 4 background: red; 5 background-image: url(../img/放大鏡.png); 6 }
效果：
很明顯看到，背景圖片的大小不適合div的寬高，所以，用background-size設置圖片的寬高
1 background-image: url(../img/放大鏡.png); 2 background-size: 20px 30px;
效果：
因為背景圖預設的設置是重覆背景圖片，所以更改為禁止重覆
1 background-image: url(../img/放大鏡.png); 2 background-size: 20px 30px; 3 background-repeat: no-repeat; /*禁止圖片重覆*/
效果：
這個時候呢，假如想調整圖片的位置，就需要設置圖片的position
1 background-image: url(../img/放大鏡.png); 2 background-size: 20px 30px; 3 background-repeat: no-repeat; /*禁止圖片重覆*/ 4 background-position: 100px 50px; /*這裡設置的是px坐標，也可以用left或者百分比的形式設置圖片位置*/
效果：
3.給外部diva設置寬度、背景色和邊框，便於觀察；給內部div1添加寬高和背景圖片，註意這裡div1的寬度是背景圖片寬度的總和；當然，div1中的圖片也要適當調整寬高。
1 .diva{ 2 width: 100%; 3 background: red; 4 border: 5px solid blue; 5 } 6 .div1{ 7 width: 900px; 8 height: 200px; 9 background-image: url(../img/輪播1.jpg),url(../img/輪播2.jpg),url(../img/輪播3.jpg); 10 background-repeat: no-repeat; 11 background-size: 300px 200px; 12 background-position: 0 0,300px 0,600px,0; 13 } 14 .div1 img{ 15 width: 20px; 16 height: 20px; 17 }
大概就是這個效果啦
4.將div1的寬度設置為一張圖片的寬度，就定義一個相當於用戶的可見視窗
1 .div1{ 2 width: 300px; /*設置div寬度為一張圖片的寬度*/ 3 height: 200px; 4 border: 10px solid green; 5 background-image: url(../img/輪播1.jpg),url(../img/輪播2.jpg),url(../img/輪播3.jpg); 6 background-repeat: no-repeat; 7 background-size: 300px 200px; 8 background-position: 0 0,300px 0,600px,0; 9 }
效果：
5.由於設置的視窗大小，剩餘的兩張圖片不可見了，相當於屋子裡面有三個人，你從一個視窗看進去，只看到了一個人，其他人被牆壁遮住了，這時如果這個人往左走，離開視窗，第二個人走到視窗位置，就可以看到第二個人了。
1 .div1{ 2 width: 300px; /*設置div寬度為一張圖片的寬度*/ 3 height: 200px; 4 border: 10px solid green; 5 background-image: url(../img/輪播1.jpg),url(../img/輪播2.jpg),url(../img/輪播3.jpg); 6 background-repeat: no-repeat; 7 background-size: 300px 200px; 8 /*background-position: 0 0,300px 0,600px,0;*/ 9 background-position: -300px 0,0 0,300px,0; /*圖片左移*/ 10 }
效果：
6.當這三個人不斷重覆這種移動，就會對窗戶外的你形成輪播效果，css3的關鍵幀動畫就可以實現這種重覆不斷的移動，不瞭解的同學可以自行百度，這裡就不細說關鍵幀動畫原理了。
css3關鍵代碼：
1 .home{ 2 width: 320px; /*為了適應iphone5的解析度設置的寬度*/ 3 height: 200px; 4 background: url(../img/輪播1.jpg),url(../img/輪播2.jpg),url(../img/輪播3.jpg),url(../img/輪播1.jpg); 5 /*第四張圖片與第一張圖片一致是為了輪播的時候效果更加自然，否則從最後一張播放到第一張會造成生硬的停頓*/ 6 7 background-repeat: no-repeat; 8 background-size: 320px 200px; 9 animation: kbg 9s linear infinite; 10 /*調用kbg關鍵幀動畫,動畫時長為9s，勻速運動，無限迴圈播放(除非頁面被關閉)*/ 11 } 12 @keyframes kbg{ 13 0%{ 14 background-position: 0 0,320px 0,640px 0,960px 0; 15 } 16 5%{ 17 background-position: 0 0,320px 0,640px 0,960px 0; 18 } 19 20 30%{ 21 background-position: -320px 0,0 0,320px 0,640px 0; 22 } 23 40%{ 24 background-position: -320px 0,0 0,320px 0,640px 0; 25 } 26 27 60%{ 28 background-position: -640px 0,-320px 0,0 0,320px 0; 29 } 30 70%{ 31 background-position: -640px 0,-320px 0,0 0,320px 0; 32 } 33 34 95%{ 35 background-position: -960px 0,-640px 0,-320px 0,0 0; 36 } 37 100%{ 38 background-position: -960px 0,-640px 0,-320px 0,0 0; 39 } 40 }
總結：關鍵幀輪播的視覺效果就和手機京東差不多，所缺的就是一些細節的地方。可能有人說網上的輪播器一大把,這樣做是重覆造輪子，但是我堅信學以致用，多練習才能理解和掌握知識要點。
題外話：
小妹初來乍到，望大家捧個人場，多多評論指正，最好加個關註呢，期待和各位的交流~
