html+css使图片在页面中循环滚动

2021-10-26 13:01:35

157

我们先通过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: ;
19             height: ;
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             {left: ; top: 0px;}
34         }
35         @keyframes roll2{
36             0%{left: -; top: 0px;}
37             {left: 0px; top: 0px;}
38         }
39         </style>

可以看到，在内部我使用了动画的效果，使两张图片在不停移动，创造一种只有一张图片不断循环的效果。

并且我将图片的宽高都设为，使其铺满整个div，这样就可以方便我们调整大小，而且使不同的图片都可以循环，而不留空。

最后div盒子的位置也可以根据我们自己的需要调整，在我的代码中我为方便观看效果，将其设在网页中心。

上一篇：前端之css2 下一篇：html、css以及javascri

网站建设

Css

html+css使图片在页面中循环滚动