本文主要介紹了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中文網其他相關文章!