沐鸣登录网站_网站前端制作之文字滚动效果
最近工作中需要做在特定的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: 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;/*设置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>
注意：当标题文字内容长度一致，动画匀速播放，效果一致，但是当标题文字内容长度不一致的时候，动画的速度也会有所不同，就会导致页面出现滚动动画播放速度不一致的效果。