服务热线 400-660-8066
南京网站建设
最近工作中需要做在特定的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是不重复从一端滚动到另外一端。
oop是设置标题文字滚动的次数，设置loop=-1是不断循环滚动，设置loop=2是循环滚动两次。Scrollamount是设置标题文字的滚动速度，滚动速度值为正整数，默认是6。
Scrolldelay是设置标题文字滚动的延迟时间。
onMouseout=this.start()和onMouseover=this.stop()分别是设置鼠标移出这个区域继续滚动和鼠标移入这个区域停止滚动。
注意：虽然marquee已经过时了，不建议使用，W3C官方文档里已查不到这个标签，但是这个标签对各大浏览器的兼容挺好的。
方式二：基于CSS3animation做出Marquee的效果。
Html：
ul
iclass=rollboxpclass=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
注意：当标题文字内容长度一致，动画匀速播放，效果一致，但是当标题文字内容长度不一致的时候，动画的速度也会有所不同，就会导致页面出现滚动动画播放速度不一致的效果。
添加动力小姐姐微信
电话咨询
400-660-8066
