加入收藏 | 设为首页 | 会员中心 | 我要投稿 我爱制作网_沈阳站长网 （https://www.024zz.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

用flex布局怎样实现无缝滚动的效果？

发布时间：2022-11-18 11:00:31 所属栏目：语言 来源：
导读：　　flex布局
　　
　　所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着浏览器的版本更新，flex布局因为自身的优点，日渐常用。
　　
　　思路：
　　
　　首先分析这个小demo的结构，上下结构，
　　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布局的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。
 

（编辑：我爱制作网_沈阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
      站长推荐
      热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

      Copygight © 2016-2022 https://www.024zz.cn/ All Rights Reserved. 我爱制作网_沈阳站长网

      ICP备案：浙ICP备16034787号 浙公网安备 33038102330576号