網站前端制作之文字滾動效果

　　最近工作中需要做在特定的li里實現標題文字滾動播放展示的效果，這樣就能實現單行顯示，文字超出也無需顯示省略，標題文字滾動播放就能把標題顯示完全。實現這種效果可以用marquee/marquee、基于CSS3animation做出marquee滾動效果等。這幾種方式均可以實現這種文字滾動播放的效果，不過都是各有優缺點。

　　需要實現的文字滾動效果如下圖所示：

　　方式一：用marquee/marquee就可以實現文字滾動播放的動態效果，下面是關于marquee標簽屬性的部分描述：

　　Direction可以設置標題文字的滾動方向，direction=down是向下的，direction=left是向左的，direction=right是向右的，direction=up是向上的。

　　Width和height是設置文字滾動的區域大小。

　　hspace和Vspace是設置標題文字的位置距離父級p的水平距離和垂直距離，距離值為正整數，單位是像素。

　　Behavior是設置滾動的方式，behavior=scroll是重復從一端滾動到另外一端。behavior=alternate是在兩端之間來回滾動，behavior=slide是不重復從一端滾動到另外一端。

　　Scrollamount是設置標題文字的滾動速度，滾動速度值為正整數，默認是6。

　　Scrolldelay是設置標題文字滾動的延遲時間。

　　onMouseout=this.start()和onMouseover=this.stop()分別是設置鼠標移出這個區域繼續滾動和鼠標移入這個區域停止滾動。

　　注意：雖然marquee已經過時了，不建議使用，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;/*設置15s內完成播放動畫，無限次勻速重復播放*/

　　}

　　.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

　　注意：當標題文字內容長度一致，動畫勻速播放，效果一致，但是當標題文字內容長度不一致的時候，動畫的速度也會有所不同，就會導致頁面出現滾動動畫播放速度不一致的效果。