最近工作中需要做在特定的li里實現(xiàn)標(biāo)題文字滾動播放展示的效果，這樣就能實現(xiàn)單行顯示，文字超出也無需顯示省略，標(biāo)題文字滾動播放就能把標(biāo)題顯示完全。實現(xiàn)這種效果可以用<marquee></marquee>、基于CSS3 animation做出marquee滾動效果等。這幾種方式均可以實現(xiàn)這種文字滾動播放的效果，不過都是各有優(yōu)缺點。
需要實現(xiàn)的文字滾動效果如下圖所示：

方式一：用<marquee></marquee>就可以實現(xiàn)文字滾動播放的動態(tài)效果，下面是關(guān)于marquee標(biāo)簽屬性的部分描述：
Direction 可以設(shè)置標(biāo)題文字的滾動方向，direction="down"是向下的，direction="left"是向左的，direction="right"是向右的, direction="up"是向上的。
Width 和 height 是設(shè)置文字滾動的區(qū)域大小。
hspace 和Vspace是設(shè)置標(biāo)題文字的位置距離父級div的水平距離和垂直距離，距離值為正整數(shù)，單位是像素。
Behavior 是設(shè)置滾動的方式，behavior="scroll"是重復(fù)從一端滾動到另外一端。behavior="alternate"是在兩端之間來回滾動，behavior="slide"是不重復(fù)從一端滾動到另外一端。
Loop是設(shè)置標(biāo)題文字滾動的次數(shù)，設(shè)置loop=”-1”是 不斷循環(huán)滾動，設(shè)置loop=”2”是循環(huán)滾動兩次。
Scrollamount是設(shè)置標(biāo)題文字的滾動速度，滾動速度值為正整數(shù)，默認(rèn)是6。
Scrolldelay是設(shè)置標(biāo)題文字滾動的延遲時間。
onMouseOut=this.start()和onMouseOver=this.stop()分別是設(shè)置鼠標(biāo)移出這個區(qū)域繼續(xù)滾動和鼠標(biāo)移入這個區(qū)域停止?jié)L動。
注意：雖然marquee已經(jīng)過時了，不建議使用， W3C官方文檔里已查不到這個標(biāo)簽，但是這個標(biāo)簽對各大瀏覽器的兼容挺好的。
方式二：基于CSS3 animation做出Marquee的效果。
Html:
<div>
<ul>
<li class="rollbox">
<div class="t1">NLS-FR27-Datasheet</div>
<div class="rollwrap">
<div class="rolltxt">
<div class="rollword"> NLS-FR27-Datasheet NLS-FR27-Datasheet NLS-FR27-Datasheet NLS-FR27-Datasheet </div>
</div>
</div>
<div class="t2"><p>Language: English</p><p>Update Date: 2020-06-26</p></div>
<div class="t3">
<a href="">Downloads</a>
</div>
</li>
</ul>
</div>
Css:
<style>
.rollwrap {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.rollwrap .rolltxt{
  display: inline-block;
  padding-left: 100%; /* 從右至左開始輪播 */
  animation: roll 15s linear infinite;/*設(shè)置15s內(nèi)完成播放動畫，無限次勻速重復(fù)播放*/
}
.rollwrap .rolltxt:hover {
-webkit-animation-play-state: paused;/* 鼠標(biāo)移入時暫停輪播，IE9以及更早的版本不支持這個屬性*/
  animation-play-state: paused;
}
.rollword{
font-family: "Poppins-Medium";
    color: #1b2077;
    font-size: 18px;
}
@-webkit-keyframes roll {
    0%   { -webkit-transform: translate(0, 0); }
    100% { -webkit-transform: translate(-100%, 0); }
}
@keyframes roll {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
</style>
注意：當(dāng)標(biāo)題文字內(nèi)容長度一致，動畫勻速播放，效果一致，但是當(dāng)標(biāo)題文字內(nèi)容長度不一致的時候，動畫的速度也會有所不同，就會導(dǎo)致頁面出現(xiàn)滾動動畫播放速度不一致的效果。