CSS Flex 布局实现无缝滚动-百分百源码网

CSS Flex 布局实现无缝滚动

发布时间：09/01 来源：未知浏览：关键词：

本文主要介绍了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 规划实现无缝滚动的具体内容，更多请关注百分百源码网其它相关文章！

打赏