这篇文章给大家分享的是用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布局的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Canvas如何对图片压缩处理，原理是什么

  这篇文章主要介绍了使用canvas压缩图片大小的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中font-family用法是什么，设置字体样式怎么做

  font-family字体类型。可以同时声明多种字体，用逗号分隔开。font-weight 指定了字体的粗细程度。text-indent定义块元素首行文本内容之前的缩进量。

• CSS图片添加边框有几种方法，用哪些属性

  图片添加边框效果的方法1、打开HTML代码软件，建立一个代码，添加图片效果有两种方法一方法：图片添加描边或者是给外面的盒子。二方法：就是直接在img图片标签。两项选一，我用是二方

• css鼠标移上图片折叠效果怎么样做？

  今天给大家分享用CSS实现一个比较酷炫有趣的效果，就是css鼠标移上图片折叠效果，实现效果、思路以及实现代码如下，对新手学习CSS动画效果的实现有一定的帮助，感兴趣的朋友可以了解看看。

• CSS中怎样提高元素层级，方法是什么

  在css中，可以利用“z-index”属性让元素的层级最高，该属性的作用就是设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，也就是元素的层级最高，语法为“元素{z-index:number;}”。