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;flex布局详细讲解
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⽆缝滚动内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。