用flex布局怎样实现无缝滚动的效果？
发布时间：2021-12-31 23:35:56 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是用flex布局实现无缝滚动的效果。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。 案例的演示 flex布局 所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着
|
这篇文章给大家分享的是用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布局实现无缝滚动的效果的代码，需要的朋友可以参考学习，希望对大家学习flex布局的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。 （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
