案例的演示
flex布局
所謂flex布局就是彈性盒布局,這種布局在移動端比較常用，但隨著瀏覽器的版本更新，flex布局因為自身的優點，日漸常用。
思路：首先分析這個小demo的結構，上下結構，我們可以用乙個容器，將其包裹（就是所謂的大盒子）。
上方是個導航，上邊是個ul，下面我們就可以用兩個div，寬度的100%，高度自定義。
接下來我們就來開啟和模型，記住一定的父盒子哦！display:flex;,那麼怎麼上下分呢？在繼續新增 flex-wrap: wrap;就是上下分離了，是不是很方便。
接下來就是下邊部分了，div裡巢狀了ul，而且ul的高度好理解，是div的高度，那麼ul多少寬呢？，可以無限寬！！！ 我們讓ul的寬度是3000px
我們接下來放li，你一看，li裡面的也是上下結構，所以呢，嘿嘿！li是不是也要開啟flex呀 flex-wrap: wrap;。上方div是放img,下邊乙個a標籤。
記住哦，li用浮動起來哦！並考慮overflow：hidden放在那裡
動畫效果
我們有五張，我們現在讓它從右向左移動。那麼我們叫ul移動，帶動li移動是不是可以。
我們用@keyframes改變ul的left的值，但是問題來了，我放五張，ul移動，右邊就沒了，空白了。腫麼辦？？？
我們是不是可以將五個li，在後面再複製乙份，放在後邊呀。 答案是可以的！！當我們的left正好將第一組li,移除，那麼第二組就剛好不上來。那麼我們用 animation: run 20s linear infinite;無限迴圈是不是就好了。
css部分**
*
a .box-big
.box-top
.div-bottom
.st-icon-android
h5 ul
li .photo
p img
@keyframes run
100%
}
補充marquee滾動，實現無縫
想必大家都注意到的不迴圈滾動，所以出現了很多替代指令碼，或iframe或js輸出，不管怎麼做，都略顯麻煩。下面說一下這個相對簡單的實現思路 乙個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接轉殖，通過不斷改變demo1...
vue實現無縫滾動功能
發現element和iview都沒問無縫滾動的特效，只有走馬燈的，最近需要用到無縫滾動的特效，就在npm上找了乙個外掛程式 vue seamless scroll 我是在nuxt裡用的 1.安裝 yarn add vue seamless scroll2.在plugins裡新建vue seamles...
無縫文字滾動
乙個常見的無縫文字滾動，結合css構建的區域形成即時新聞列表，與常見滾動有所不同的是，我們增加了手動控制，即 如果文字滾動錯過了想要看的文章標題，您可以按向上或向下的控制按鈕進行返回操作。文章源自 烈火網，原文 即時新聞 盛大遊戲獲 最終幻想14 大陸獨家運 盛大和cntv.cn成立合資遊戲公司易橙...