CSS Flex 布局实现无缝滚动

本文主要介绍了flex布局实现无缝滚动的示例代码，分享给大家，具体如下：

案例的演示

flex布局

所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着浏览器的版本更新，flex布局因为自身的优点，日渐常用。

思路：

• 首先分析这个小demo的结构，上下结构，我们可以用一个容器，将其包裹（就是所谓的大盒子）。

• 上方是个导航，上边是个ul，下面我们就可以用两个p，宽度的100%，高度自定义。

• 接下来我们就来开启和模型，记住一定的父盒子哦！display:flex;,那么怎么上下分呢？在继续添加 flex-wrap: wrap;就是上下分离了，是不是很方便。

• 接下来就是下边部分了，p里嵌套了ul，而且ul的高度好理解，是p的高度，那么ul多少宽呢？，可以无限宽！！！ 我们让ul的宽度是3000px

• 我们接下来放li，你一看，li里面的也是上下结构，所以呢，嘿嘿！li是不是也要开启flex呀 flex-wrap: wrap;。上方p是放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; }  .p-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;     } }

推荐教程：《CSS教程》

以上就是CSS Flex 布局实现无缝滚动的详细内容，更多内容请关注技术你好其它相关文章！