我們先通過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盒子的位置也可以根據我們自己的需要調整，在我的代碼中我為方便觀看效果，將其設在網頁中心。