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

 

我们先通过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 

 

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

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

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

 

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

你可能感兴趣的:(html+css使图片在页面中循环滚动)