网页设计字体滚动 第1篇
在本文中，我们详细分析了如何实现文字跑马灯效果，通过判断文字内容是否超出容器，进而实现自动滚动的功能，为网站添加了一个引人注目的动画效果。下面我来进行总结一下，实现文字滚动效果有以下几个要点：
判断文字的宽度是否超出：使用().width API 获取文字的宽度，使用 API 获取容器的宽度，当 ().width > ，触发文字滚动。
实现文字滚动动画：使用 transform 动画实现文字滚动效果。
文字跑马灯作为一种常见的动画效果，可以吸引用户的注意力。当然，本文只是在实现方式及实现原理上进行详细分析，你可以在了解这些之后对其进行更加具体的改造，比如动画效果、文字背景、上下滚动、操作暂停等等。
希望通过本文的学习，可以让你对文字跑马灯有了更深入的理解！
如果您感觉文章还不错，点个赞再走吧！
网页设计字体滚动 第2篇
通过以上实现原理和示例代码，可以实现一个简单的文字跑马灯组件，具体的演示效果如下图所示，同时你也可以根据实际需要对样式和滚动效果进行调整。
当文本内容宽度未超出容器宽度时，文本内容保持静态显示即可。
当文本内容宽度超出容器宽度时，文本会自动滚动显示；
码上掘金演示效果如下：
网页设计字体滚动 第3篇
在进行自己实现文字跑马灯效果之前，我们先来看一下 HTML 元素中的 元素。
HTML marquee 元素（）用来插入一段滚动的文字，可以使用它的属性控制当文本超出容器时实现文字滚动效果。
注意： 元素已经过时，官方建议不要再使用。可能一些浏览器仍然支持它，或许不久从相关的 web 标准中移除，请尽量不要使用该特性，因为可能该特性随时可能无法正常工作
虽然已经移除，我们可以学习一下的滚动 API，借鉴一下来拓展一下思路：
简单说几个重点的 API：
遗憾的是，我查看了它的所有 API，发现它并不支持自动判断文字宽度的操作。下面我以一个简单的例子使用 marquee 实现滚动效果：
通过以上简单的代码，marquee版的文字滚动就实现了，如下所示：
由于元素已被官方弃用，同时也不支持配置动态滚动，更多详细内容文档参考：marquee MDN 文档
因此，接下来我们自己实现一个文字跑马灯效果。