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...