本文主要介绍了flex布局实现无缝滚动的示例代码,分享给大家,具体如下:
案例的演示
flex布局
所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用。
思路:
- 首先分析这个小demo的结构,上下结构,我们可以用一个容器,将其包裹(就是所谓的大盒子)。
- 上方是个导航,上边是个ul,下面我们就可以用两个div,宽度的100%,高度自定义。
- 接下来我们就来开启和模型,记住一定的父盒子哦!display:flex;,那么怎么上下分呢?在继续添加 flex-wrap: wrap;就是上下分离了,是不是很方便。
- 接下来就是下边部分了,div里嵌套了ul,而且ul的高度好理解,是div的高度,那么ul多少宽呢?,可以无限宽!!! 我们让ul的宽度是3000px
- 我们接下来放li,你一看,li里面的也是上下结构,所以呢,嘿嘿!li是不是也要开启flex呀 flex-wrap: wrap;。上方div是放img,下边一个a标签。
- 记住哦,li用浮动起来哦!并考虑overflow:hidden放在那里
动画效果
- 我们有五张图片,我们现在让它从右向左移动。那么我们叫ul移动,带动li移动是不是可以。
- 我们用@keyframes改变ul的left的值,但是问题来了,我放五张图片,ul移动,右边就没了,空白了。肿么办???
- 我们是不是可以将五个li,在后面再复制一份,放在后边呀。 答案是可以的!!当我们的left正好将第一组li,移除,那么第二组就刚好不上来。那么我们用 animation: run 20s linear infinite;无限循环是不是就好了。
css部分代码
* { margin: 0; padding: 0; } a { text-decoration: none; } .box-big { position: absolute; display: flex; left: 50%; top: 50%; border: 1px solid #9FD6FF; transform: translate(-50%, -50%); width: 707px; height: 170px; /* background-color: pink; */ flex-wrap: wrap; overflow: hidden; } .box-top { width: 707px; height: 30px; border-bottom: 1px solid #9FD6FF; background-color: #FEFEFE; } .div-bottom { width: 707px; height: 136px; /* background-color: darkgoldenrod; */ overflow: hidden; } .st-icon-android { display: inline-block; width: 15px; height: 15px; background-image: url(../img/hd.gif); margin: 8px; } h5 { position: absolute; top: 6PX; left: 30px; color: #307DD1; } ul { position: absolute; left: 90px; width: 3000px; height: 100%; animation: run 20s linear infinite; } li { list-style: none; float: left; width: 140px; height: 100%; margin: 0 5px 0 5px; /* background-color: gold; */ flex-wrap: wrap; } .photo { margin-top: 5px; width: 140px; height: 105px; text-align: center; /* background-color: springgreen; */ } p { text-align: center; } img { cursor: pointer; } @keyframes run { 0% { left: 0; } 100% { left: -745px; } }
标签:
flex,无缝滚动
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
千金楼资源网 Copyright www.htabc.com
暂无“flex布局实现无缝滚动的示例代码”评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]