使用HTML+CSS实现图片滚动效果
2020-04-19 22:57
2775 查看
使用HTML+CSS实现图片滚动效果
之前用js实现过图片切换的效果,今天实现图片滚动的特效,这里不包含图片的切换。
直接上代码:
<div class="loopimg"> <ul> <li> <img src="img/运动/运动 - 21.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 32.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 51.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 75.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 77.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 95.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 96.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 21.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 32.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 51.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 75.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 77.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 95.jpg" height="200px"/> </li> <li> <img src="img/运动/运动 - 96.jpg" height="200px"/> </li> </ul> </div>
这里共嵌套3层。div-ul-li,动画效果放在ul中,li样式使用float-left,使图片水平排列。一共有7张图片,重复一遍,也就是一共有14张图片。
.loopimg{ width: 4173px; height: 200px; margin: 0px auto; padding: 0px; overflow: hidden; } .loopimg > ul{ width: 100%; /*动画名称*/ animation-name: move; /*动画时间*/ animation-duration: 15s; /*动画次数*/ animation-iteration-count: infinite; /*匀速*/ animation-timing-function: linear; } .loopimg > ul > li{ float: left; list-style: none; } #foot{ border: 1px solid black; height: 80px; width: 100%; text-align: center; } @keyframes move { /*动画起始位置*/ 0%{ transform: translateX(0px); } /*动画结束状态*/ 100%{ transform: translateX(-2086.24px); } }
其中DIV为放图片的容器,设置为overflow:hidden,也就是超过的部分忽略。
div的宽度就设置为页面中的宽度,ul的宽度设置为所有图片的宽度之和,li样式为none,向左浮动。
接下来是动画设置:@keyframes move,2086.24是7张图片的宽度,也就是ul从像素0移动到像素-2048.24。也就是一次动画滚动7张图片,我放14张是为了不显示空白。至于ul中动画的各种设置,代码中已经有了注释了最终效果如下。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- html 使用js+css+html实现图片划过预览效果
- 使用HTML+css实现京东图片自动轮播效果(自己写的)
- HTML+CSS项目实践五:使用纯CSS实现点击文字切换图片效果(不使用JS)
- 使用 MARQUEE HTML中实现图片的各种滚动效果
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- html+css实现图片滑移效果
- 使用css实现页面头部固定,下面随着内容的增多滚动,但是头部不动的效果
- css中图片使用绝对定位实现居中效果[第二篇]
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)
- Android使用Recyclerview实现图片水平自动循环滚动效果
- HTML中 css实现滚动页面时固定页面其中一栏的效果
- 只用css和html实现简单的图片轮播效果
- html之marquee实现图片文字滚动效果详解
- jQuery+CSS实现的图片滚动效果
- 使用jquery + css + html实现点击左右箭头切换图片
- 使用JQuery.slideBox实现图片滚动效果
- jQuery+CSS实现的图片滚动效果
- 使用js实现带有停顿效果的图片滚动(按钮控制)