html+css使图片在页面中循环滚动 |
您所在的位置：网站首页 › 怎么制作循环图片 › html+css使图片在页面中循环滚动 |
|
我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。 1 DOCTYPE html> 2 3 4 5 滚动播放 6 7 8 9 10 11 12 13
接下来就是重点，css给内部添加样式 1 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
可以看到，在内部我使用了动画的效果，使两张图片在不停移动，创造一种只有一张图片不断循环的效果。 并且我将图片的宽高都设为100%，使其铺满整个div，这样就可以方便我们调整大小，而且使不同的图片都可以循环，而不留空。 最后div盒子的位置也可以根据我们自己的需要调整，在我的代码中我为方便观看效果，将其设在网页中心。
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |