我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>滚动播放</title>
6 </head>
7 <body>
8 <div>
9 <img class="c1" src="img/banner_3.jpg"/>
10 <img class="c2"src="img/banner_3.jpg"/>
11 </div>
12 </body>
13 </html>
接下来就是重点，css给内部添加样式
1 <style type="text/css"> 2 *{
3 margin: 0px;
4 padding: 0px;
5 }
6 div{
7 overflow: hidden;
8 width: 1500px;
9 height: 400px;
10 margin: auto;
11 position: absolute;
12 top: 0px;
13 left: 0px;
14 right: 0px;
15 bottom: 0px;
16 }
17 img{
18 width: 100%;
19 height: 100%;
20 position: absolute;
21 animation-iteration-count: infinite;
22 animation-timing-function: linear;
23 animation-duration: 15s;
24 }
25 .c1{
26 animation-name: roll1;
27 }
28 .c2{
29 animation-name: roll2;
30 }
31 @keyframes roll1{
32 0%{left: 0px; top: 0px;}
33 100%{left: 100%; top: 0px;}
34 } 35 @keyframes roll2{
36 0%{left: -100%; top: 0px;}
37 100%{left: 0px; top: 0px;}
38 } 39 </style>
可以看到，在内部我使用了动画的效果，使两张图片在不停移动，创造一种只有一张图片不断循环的效果。
并且我将图片的宽高都设为100%，使其铺满整个div，这样就可以方便我们调整大小，而且使不同的图片都可以循环，而不留空。
最后div盒子的位置也可以根据我们自己的需要调整，在我的代码中我为方便观看效果，将其设在网页中心。