css實現文字輪播，前端學習日誌02

2021-10-22 04:48:27 字數 851 閱讀 3802

專案中遇到需求需要實現文字的滾動條（橫向和豎向），由於要相容多種瀏覽器，我使用了純css進行實現，這裡做乙個分享希望能給大家一點啟發。

首先是橫向滾動條，這個比較簡單，具體看以下**：

水庫水位：正常


.label-content 


@keyframes anis 


100% 


}.lunbo_text 


.lunbo_text :hover
可以看到是使用了transform屬性，通過translatex方法實現在x軸上的滾動，同時需要設定父元件overflow：hidden防止文字超出父容器時自動隱藏，並設定hover偽類當滑鼠移至文字上時停止滾動。

豎向滾動與橫向滾動思路相同，但是由於需求原因，需要輪播的文字等待一段時間後再滾動，盡可能實現類似輪播圖的效果，具體思路為詳細設定自定義的動作，使其滾動至下一行時等待一段時間。
豎向輪播需要在最後一行新增第一行相同屬性，得到更好的顯示效果。

.row-content 


.row-content .row-list 


.row-content .row-list :hover 


@keyframes anis 


25% 


33% 


58% 


66% 


91% 


100% 


}
與橫向不同僅僅時橫向滾動時使用translatex方法，而豎向使用translatey，具體運動軌跡可以自行進行設計，如要得到平滑滾動效果僅需要設定起點和終點即可。

超簡單的文字輪播

這是一段耐人尋味的 當然了你想看就看，不想看就直接跳過。兩分鐘即可寫出文字輪播，因為這是封裝的乙個js檔案，主要是使用簡單。fn.extend var this this.eq 0 find ul first var lineh this.find li first height 獲取行高 line...

我是這樣寫文字輪播的

功能點 文字無縫輪播 不要在意為什麼在移動端還會有這樣的需求 當一說到文字無縫滾動時，大家最先想到的是marquee，但是已經好久沒有接觸這個標籤了，w3c也不對其進行 維護了，並且還有最後必須等到全部滾動完畢才會再次滾動,並且對於rem布局採用基於px的滾動體驗會非常的 差等等。第二個想到的是採用...

一款簡單實用的文字輪播器

用處 為了解決文字過長顯示不全的雞肋，進行如led屏的輪播機制，進行輪播，將所有文字展現出來。dctextcirclelabel是我封裝的文字輪播器，直接載入到view 上面使用即可。dctextcirclelabel.h檔案裡 import inte ce dctextcirclelabel ui...