最近工作中需要做在特定的li里實現(xiàn)標題文字滾動播放展示的效果,這樣就能實現(xiàn)單行顯示,文字超出也無需顯示省略,標題文字滾動播放就能把標題顯示完全。實現(xiàn)這種效果可以用marquee/marquee、基于CSS3animation做出marquee滾動效果等。這幾種方式均可以實現(xiàn)這種文字滾動播放的效果,不過都是各有優(yōu)缺點。
需要實現(xiàn)的文字滾動效果如下圖所示:
方式一:用marquee/marquee就可以實現(xiàn)文字滾動播放的動態(tài)效果,下面是關(guān)于marquee標簽屬性的部分描述:
Direction可以設(shè)置標題文字的滾動方向,direction=down是向下的,direction=left是向左的,direction=right是向右的,direction=up是向上的。
Width和height是設(shè)置文字滾動的區(qū)域大小。
hspace和Vspace是設(shè)置標題文字的位置距離父級p的水平距離和垂直距離,距離值為正整數(shù),單位是像素。
Behavior是設(shè)置滾動的方式,behavior=scroll是重復(fù)從一端滾動到另外一端。behavior=alternate是在兩端之間來回滾動,behavior=slide是不重復(fù)從一端滾動到另外一端。
oop是設(shè)置標題文字滾動的次數(shù),設(shè)置loop=-1是不斷循環(huán)滾動,設(shè)置loop=2是循環(huán)滾動兩次。Scrollamount是設(shè)置標題文字的滾動速度,滾動速度值為正整數(shù),默認是6。
Scrolldelay是設(shè)置標題文字滾動的延遲時間。
onMouseout=this.start()和onMouseover=this.stop()分別是設(shè)置鼠標移出這個區(qū)域繼續(xù)滾動和鼠標移入這個區(qū)域停止?jié)L動。
注意:雖然marquee已經(jīng)過時了,不建議使用,W3C官方文檔里已查不到這個標簽,但是這個標簽對各大瀏覽器的兼容挺好的。
方式二:基于CSS3animation做出Marquee的效果。
Html:
ul
iclass=rollboxpclass=t1NLS-FR27-Datasheet/
pclass=rollwra
pclass=rolltxt
pclass=rollwordNLS-FR27-DatasheetNLS-FR27-DatasheetNLS-FR27-DatasheetNLS-FR27-Datasheet/
/
/
pclass=t2pLanguage:English/ppUpdateDate:2023-06-26/p/
pclass=t3
ahref=Downloads/a
/
/li
/ul
/
Css:
style
.rollwrap{
margin:0auto;
white-space:nowrap;
overflow:hidden;
box-sizing:border-box;
}
.rollwrap.rolltxt{
display:inline-block;
padding-left:100%;/*從右至左開始輪播*/
animation:roll15slinearinfinite;/*設(shè)置15s內(nèi)完成播放動畫,無限次勻速重復(fù)播放*/
}
.rollwrap.rolltxt:hover{
-webkit-animation-play-state:paused;/*鼠標移入時暫停輪播,IE9以及更早的版本不支持這個屬性*/
animation-play-state:paused;
}
.rollword{
font-family:Poppins-Medium;
color:#1b2077;
font-size:18px;
}
@-webkit-keyframesroll{
0%{-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(-100%,0);}
}
@keyframesroll{
0%{transform:translate(0,0);}
100%{transform:translate(-100%,0);}
}
/style
注意:當(dāng)標題文字內(nèi)容長度一致,動畫勻速播放,效果一致,但是當(dāng)標題文字內(nèi)容長度不一致的時候,動畫的速度也會有所不同,就會導(dǎo)致頁面出現(xiàn)滾動動畫播放速度不一致的效果。