flex布局實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例代碼

發(fā)布時(shí)間：2020-07-20 16:12:48 作者：睡懶覺(jué)的大男孩

這篇文章主要介紹了flex布局實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了flex布局實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例代碼，分享給大家，具體如下：

案例的演示

flex布局

所謂flex布局就是彈性盒布局,這種布局在移動(dòng)端比較常用，但隨著瀏覽器的版本更新，flex布局因?yàn)樽陨淼膬?yōu)點(diǎn)，日漸常用。

思路：

首先分析這個(gè)小demo的結(jié)構(gòu)，上下結(jié)構(gòu)，我們可以用一個(gè)容器，將其包裹（就是所謂的大盒子）。
上方是個(gè)導(dǎo)航，上邊是個(gè)ul，下面我們就可以用兩個(gè)div，寬度的100%，高度自定義。
接下來(lái)我們就來(lái)開(kāi)啟和模型，記住一定的父盒子哦！display:flex;,那么怎么上下分呢？在繼續(xù)添加 flex-wrap: wrap;就是上下分離了，是不是很方便。
接下來(lái)就是下邊部分了，div里嵌套了ul，而且ul的高度好理解，是div的高度，那么ul多少寬呢？，可以無(wú)限寬！?。?我們讓ul的寬度是3000px
我們接下來(lái)放li，你一看，li里面的也是上下結(jié)構(gòu)，所以呢，嘿嘿！li是不是也要開(kāi)啟flex呀 flex-wrap: wrap;。上方div是放img,下邊一個(gè)a標(biāo)簽。
記住哦，li用浮動(dòng)起來(lái)哦！并考慮overflow：hidden放在那里

動(dòng)畫(huà)效果

我們有五張圖片，我們現(xiàn)在讓它從右向左移動(dòng)。那么我們叫ul移動(dòng)，帶動(dòng)li移動(dòng)是不是可以。
我們用@keyframes改變ul的left的值，但是問(wèn)題來(lái)了，我放五張圖片，ul移動(dòng)，右邊就沒(méi)了，空白了。腫么辦？？？
我們是不是可以將五個(gè)li，在后面再?gòu)?fù)制一份，放在后邊呀。答案是可以的?。‘?dāng)我們的left正好將第一組li,移除，那么第二組就剛好不上來(lái)。那么我們用 animation: run 20s linear infinite;無(wú)限循環(huán)是不是就好了。

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

到此這篇關(guān)于flex布局實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例代碼的文章就介紹到這了,更多相關(guān)flex無(wú)縫滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！