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

方式一：用<marquee></marquee>就可以實(shí)現(xiàn)文字滾動(dòng)播放的動(dòng)態(tài)效果，下面是關(guān)于marquee標(biāo)簽屬性的部分描述：
Direction 可以設(shè)置標(biāo)題文字的滾動(dòng)方向，direction="down"是向下的，direction="left"是向左的，direction="right"是向右的, direction="up"是向上的。
Width 和 height 是設(shè)置文字滾動(dòng)的區(qū)域大小。
hspace 和Vspace是設(shè)置標(biāo)題文字的位置距離父級(jí)div的水平距離和垂直距離，距離值為正整數(shù)，單位是像素。
Behavior 是設(shè)置滾動(dòng)的方式，behavior="scroll"是重復(fù)從一端滾動(dòng)到另外一端。behavior="alternate"是在兩端之間來回滾動(dòng)，behavior="slide"是不重復(fù)從一端滾動(dòng)到另外一端。
Loop是設(shè)置標(biāo)題文字滾動(dòng)的次數(shù)，設(shè)置loop=”-1”是 不斷循環(huán)滾動(dòng)，設(shè)置loop=”2”是循環(huán)滾動(dòng)兩次。
Scrollamount是設(shè)置標(biāo)題文字的滾動(dòng)速度，滾動(dòng)速度值為正整數(shù)，默認(rèn)是6。
Scrolldelay是設(shè)置標(biāo)題文字滾動(dòng)的延遲時(shí)間。
onMouseOut=this.start()和onMouseOver=this.stop()分別是設(shè)置鼠標(biāo)移出這個(gè)區(qū)域繼續(xù)滾動(dòng)和鼠標(biāo)移入這個(gè)區(qū)域停止?jié)L動(dòng)。
注意：雖然marquee已經(jīng)過時(shí)了，不建議使用， W3C官方文檔里已查不到這個(gè)標(biāo)簽，但是這個(gè)標(biāo)簽對(duì)各大瀏覽器的兼容挺好的。
方式二：基于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)完成播放動(dòng)畫，無限次勻速重復(fù)播放*/
}
.rollwrap .rolltxt:hover {
-webkit-animation-play-state: paused;/* 鼠標(biāo)移入時(shí)暫停輪播，IE9以及更早的版本不支持這個(gè)屬性*/
  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)容長(zhǎng)度一致，動(dòng)畫勻速播放，效果一致，但是當(dāng)標(biāo)題文字內(nèi)容長(zhǎng)度不一致的時(shí)候，動(dòng)畫的速度也會(huì)有所不同，就會(huì)導(dǎo)致頁面出現(xiàn)滾動(dòng)動(dòng)畫播放速度不一致的效果。