首頁  >  文章  >  web前端  >  CSS Flex 版面配置實現無縫滾動

CSS Flex 版面配置實現無縫滾動

Guanhui
Guanhui原創
2020-07-21 12:43:403443瀏覽

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 版面配置實現無縫滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn