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

最新推荐文章于 2021-06-03 09:07:22 发布

aiguan9054

最新推荐文章于 2021-06-03 09:07:22 发布

阅读量3.6k

点赞数 6

原文链接：http://www.cnblogs.com/YLTzxzy/p/11063876.html

版权

我们先通过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盒子的位置也可以根据我们自己的需要调整，在我的代码中我为方便观看效果，将其设在网页中心。

转载于:https://www.cnblogs.com/YLTzxzy/p/11063876.html

aiguan9054

关注

6
点赞
踩
38

收藏

觉得还不错? 一键收藏
0
评论
html+css使图片在页面中循环滚动

我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动播放</title>...
复制链接

扫一扫