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:1pxsolid#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:1pxsolid#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;
}

h6{
position:absolute;
top:6PX;
left:30px;
color:#307DD1;
}

ul{
position:absolute;
left:90px;
width:3000px;
height:100%;
animation:run20slinearinfinite;
}

li{
list-style:none;
float:left;
width:140px;
height:100%;
margin:05px05px;
/*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;
}

@keyframesrun{
0%{
left:0;
}
100%{
left:-745px;
}
}

关于“flex布局如何实现无缝滚动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。