網(wǎng)站前端制作之文字滾動效果

　　最近工作中需要做在特定的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ù)從一端滾動到另外一端。

　　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

　　pclass=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)滾動動畫播放速度不一致的效果。