实现效果：打开手机京东，可以看到首页的头部，以这个头部为基础，仿写一个类似的样式。
思路：仔细观察可以发现，手机京东的头部是以一个搜索栏和轮播特效组成的，而这个搜索栏是以轮播特效做为背景的，现在运用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 }
总结：关键帧轮播的视觉效果就和手机京东差不多，所缺的就是一些细节的地方。可能有人说网上的轮播器一大把,这样做是重复造轮子，但是我坚信学以致用，多练习才能理解和掌握知识要点。
题外话：
小妹初来乍到，望大家捧个人场，多多评论指正，最好加个关注呢，期待和各位的交流~