實現效果：開啟手機京東，可以看到首頁的頭部，以這個頭部為基礎，仿寫乙個類似的樣式。
思路：仔細觀察可以發現，手機京東的頭部是以乙個搜尋欄和輪播特效組成的，而這個搜尋欄是以輪播特效做為背景的，現在運用css3關鍵幀動畫，可以實現這樣的頭部效果。
測試：首先，寫乙個簡單的測試來驗證思路是否正確，這樣可以排除其他樣式的干擾；測試如下：
1.兩個巢狀的div，內部div1以簡單的文字和模擬的搜尋欄
1
<
body
>
2<
div
class
="diva"
>
3<
div
class
="div1"
>頭部4
<
img
src="../img/放大鏡.png"
>
5div
>
6div
>
7body
>
由url插入
1
div
很明顯看到，背景的大小不適合div的寬高，所以，用background-size設定的寬高
1
background-image: url(../img/放大鏡.png);
2background-size: 20px 30px;
因為背景圖預設的設定是重複背景，所以更改為禁止重複
1
background-image: url(../img/放大鏡.png);
2background-size: 20px 30px;
3background-repeat: no-repeat;
/*禁止重複
*/
這個時候呢，假如想調整的位置，就需要設定的position
1
background-image: url(../img/放大鏡.png);
2background-size: 20px 30px;
3background-repeat: no-repeat;
/*禁止重複*/4
background-position: 100px 50px;
/*這裡設定的是px座標，也可以用left或者百分比的形式設定位置
*/
.給外部diva設定寬度、背景色和邊框，便於觀察；給內部div1新增寬高和背景，注意這裡div1的寬度是背景寬度的總和；當然，div1中的也要適當調整寬高。
1
.diva
6.div1
14.div1 img
4.將div1的寬度設定為一張的寬度，就定義乙個相當於使用者的可見視窗
1
.div1
5.由於設定的視窗大小，剩餘的兩張不可見了，相當於屋子裡面有三個人，你從乙個視窗看進去，只看到了乙個人，其他人被牆壁遮住了，這時如果這個人往左走，離開視窗，第二個人走到視窗位置，就可以看到第二個人了。
1
.div1
css3關鍵**：
1
.home
12@keyframes kbg
165%
1920
30%23
40%26
2760%
3070%
3334
95%37
100%
40}
題外話：
css3關鍵幀動畫animation
css關鍵幀動畫 animation name 屬性為 keyframes 動畫規則名稱。若設定為none則覆蓋已有的動畫效果。animation duration 規定動畫完成乙個週期所花費的秒或毫秒。預設是0。animation timing function 規定動畫的速度曲線。預設是 eas...
CSS3 animation 關鍵幀 動畫
動畫 animation 首先定義一套關鍵幀 方法 keyframes 動畫名稱 25 50 75 100 注 可以從0 一直設定到100 然後呼叫 動畫名稱 方法 animation 1s 2s 動畫名稱 運動方式 動畫執行的次數 第乙個值 運動的總時間 第二個值 延遲的運動時間 第三個值 動畫名...
詳解CSS動畫屬性關鍵幀keyframes全解析
大概有多久沒有更新專欄文章了。半年？下半年忙到起飛，或者毫不誇張的說是發射？僅有的一點個人時間，上半年貢獻給了python，現在差不多已忘掉了七七八八 一首 涼涼 送給自己 下半年貢獻給了j ascript，終於鼓起勇氣系統的開始學習js了 換台，梁靜茹 勇氣 走起 本來想一直等等等，等到webap...