最近工作□□□中需要做□□□在特定的li里实现标▽题文字滚◣动播放展□□□示的效果，这样就能□□□实现单行✦显示，文字超出□□□□也无需显□□□示省略，标题文字□□□□滚动播放□□□就能把标•题显示完□□□全。实现这种□□效果可以□□□□用<marquee></marquee>、基于CSS3 animation做出marquee滚动效果◎等。这几种方□□式均可以□□□□实现这种◢文字滚动□□播放的效•果，不过都是□□□□各有优缺♦点。
需要实现的文字滚动效果如下图所示：

方式一：用<marquee></marquee>就可以实□□□现文字滚□□□动播放的□□□动态效果，下面是关□□于marquee标签属性□□□□的部分描◣述：
Direction 可以设置◤标题文字□□□的滚动方✦向，direction="down"是向下的，direction="left"是向左的，direction="right"是向右的, direction="up"是向上的。
Width 和 height 是设置文字滚动的区域大小。
hspace 和Vspace是设置标□□题文字的□□□位置距离□□□□父级div的水平距♦离和垂直丨距离，距离值为□□正整数，单位是像□□素。
Behavior 是设置滚✦动的方式，behavior="scroll"是重复从□□□□一端滚动▲到另外一※端。behavior="alternate"是在两端□□之间来回★滚动，behavior="slide"是不重复□□□□从一端滚◢动到另外□□□一端。
Loop是设置标□□□题文字滚□□动的次数，设置loop=”-1”是 不断循环□□□滚动，设置loop=”2”是循环滚□□□□动两次。
Scrollamount是设置标题文字的滚动速度，滚动速度值为正整数，默认是6。
Scrolldelay是设置标题文字滚动的延迟时间。
onMouseOut=this.start()和onMouseOver=this.stop()分别是设□□□□置鼠标移□□□□出这个区▲域继续滚□□动和鼠标○移入这个▽区域停止☆滚动。
注意：虽然marquee已经过时✦了，不建议使□□□用， W3C官方文档◉里已查不□□□□到这个标•签，但是这个·标签对各□□□大浏览器□□□的兼容挺□□好的。
方式二：基于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: 2026-07-04</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;/*设置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-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>
注意：当标题文□□字内容长□□□度一致，动画匀速□□□播放，效果一致，但是当标◣题文字内◈容长度不◣一致的时□□候，动画的速□□□度也会有❖所不同，就会导致□□页面出现□□□□滚动动画□□播放速度□□□不一致的□□□□效果。