Sample code for seamless scrolling with flex layout

This article mainly introduces the sample code of flex layout to achieve seamless scrolling, which is shared with you as follows:

Case demonstration

Flex layout

The so-called flex layout is an elastic box layout. This layout is more commonly used on mobile devices, but with the update of browser versions, flex layout is becoming more and more commonly used because of its own advantages.

Ideas:

• First, let’s analyze the structure of this small demo, the upper and lower structures. We can use a container to wrap it (the so-called big box).
• There is a navigation at the top, and a ul above that, and below we can use two divs, with a width of 100% and a customized height.
• Next, we will open and model, remember the certain parent box! display:flex;, then how to divide it up and down? If we continue to add flex-wrap: wrap;, it will separate the top and bottom. Isn’t it convenient?
• Next is the lower part. The ul is nested in the div, and the height of the ul is easy to understand, it is the height of the div, so how wide is the ul? , can be infinitely wide! ! ! We set the width of ul to 3000px
• Next, we put li. You can see that li also has an upper and lower structure, so, hehe! Does li also need to enable flex? flex-wrap: wrap; The div above is for img, and there is an a tag below.
• Remember, li should float! And consider putting overflow:hidden there

Animation effects

• We have five images, and we now let it move from right to left. So if we ask ul to move, can it drive li to move?
• We use @keyframes to change the left value of ul, but here comes the problem. When I put five pictures and ul moves, the right side disappears and becomes blank. What to do? ? ?
• Can we copy the five li and put them at the back? The answer is yes! ! When our left just removes the first group of li, then the second group just doesn't come up. Then we use animation: run 20s linear infinite; infinite loop, right?

CSS part code

* {
    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;
    }
}

This concludes this article on sample code for implementing seamless scrolling with flex layout. For more information on flex seamless scrolling, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!