网站前端制作之文字滚动效果
最近工作中需要做在特定的li里实现标题文字滚动播放展示的效果，这样就能实现单行显示，文字超出也无需显示省略，标题文字滚动播放就能把标题显示完全。实现这种效果可以用、基于CSS3 animation做出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:
NLS-FR27-Datasheet
NLS-FR27-Datasheet NLS-FR27-Datasheet NLS-FR27-Datasheet NLS-FR27-Datasheet
Language: English
Update Date: 2020-06-26
Css:
注意：当标题文字内容长度一致，动画匀速播放，效果一致，但是当标题文字内容长度不一致的时候，动画的速度也会有所不同，就会导致页面出现滚动动画播放速度不一致的效果。
以上就是速优网络和大家分享的"网站前端制作之文字滚动效果",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。
TAG标签：
