现代跑马灯动画：从传统marquee到CSS3与JS的进阶实现

1. 跑马灯动画：从“古董”标签到现代方案的演进

还记得十几年前刚入行那会儿，做网页滚动文字效果，第一反应就是 <marquee> 标签。一行代码，加上 scrollamount 和 direction 属性，文字就能动起来，简直不要太方便。那时候很多政府网站、学校官网的“最新公告”栏，清一色都是用它。但用久了就发现不对劲了，这玩意儿滚动起来一顿一顿的，想让它无缝衔接、循环播放？基本没戏。鼠标悬停想暂停？得靠一些奇技淫巧的 JavaScript 去模拟。更要命的是，这个标签在 HTML5 标准里已经被明确标记为“废弃”了，各大浏览器虽然还支持，但指不定哪天就彻底不支持了。

所以，现在但凡有点追求的项目，基本都不会再用 <marquee> 了。那我们要实现类似股票行情、新闻头条、大屏数据监控面板上那种流畅的、无限循环的滚动效果，该怎么办呢？这就是我们今天要聊的核心：用现代 CSS3 和 JavaScript 技术，实现更强大、更灵活的跑马灯动画。这不仅仅是换一种写法，而是从“能用”到“好用”、“专业”的跨越。特别是现在大屏数据可视化项目特别火，领导们都喜欢那种科技感十足、数据实时滚动的效果，传统方案根本撑不起场面。

我这些年做过不少智慧城市、金融交易大厅的项目，对大屏上的滚动动画要求感触特别深。它不仅仅是“动起来”就行，还得满足几个硬核需求：第一是无缝滚动，不能滚到末尾卡一下再跳回开头，那太掉价了；第二是动态数据适配，后台数据随时在变，长度不一，动画得能智能调整速度和时长；第三是交互友好，鼠标放上去暂停看详情，移开继续滚，这是基本操作；第四是性能必须丝滑，不能卡顿，尤其是同时渲染几十上百条数据的时候。接下来，我就结合这些实战经验，带你彻底搞懂现代跑马灯的几种实现方案，并告诉你不同场景下该怎么选。

2. 方案一：传统 marquee 标签的快速上手与致命缺陷

咱们还是从最古老的 <marquee> 说起，毕竟了解过去才能更好地面向未来。它的用法确实简单到令人发指。假设我们要做一个垂直滚动的公告栏，HTML 大概长这样：

<div class="announcement-box">
  <marquee scrollamount="2" direction="up" behavior="scroll" loop="-1" onmouseover="this.stop()" onmouseout="this.start()">
    <p>第一条重要通知：系统将于今晚凌晨进行升级维护。</p>
    <p>第二条通知：季度财报数据已更新，请相关同事查收。</p>
    <p>第三条通知：会议室预约系统新增扫码签到功能。</p>
  </marquee>
</div>

这里几个属性你一看就懂：direction 控制方向（up, down, left, right），scrollamount 控制滚动速度（数字越大越快），behavior 可以是滚动（scroll）、滑动（slide）或交替（alternate）。后面用 onmouseover 和 onmouseout 这种内联事件来实现悬停暂停，已经是当年为了弥补功能不足的典型补丁写法了。

它的优点显而易见：零学习成本，对新手极其友好，不需要懂任何 CSS 动画或 JavaScript 就能让内容动起来。在一些非常简单的、内部使用的管理后台，或者对兼容性有极端要求（比如某些老旧的内网系统）的场景下，它可能还能凑合一下。

但它的缺陷是根本性的，决定了它无法胜任现代Web开发：

1. 无法实现真正的无缝滚动：内容滚动到末尾时，必然会有一个明显的停顿，然后从头开始，视觉上很不连贯。
2. 样式和控制能力极其有限：你想用贝塞尔曲线控制缓动？想根据内容长度动态调整速度？想做出复杂的交错动画效果？对不起，它做不到。
3. 性能问题：它的滚动是由浏览器内部机制实现的，在某些浏览器或复杂页面中可能导致不必要的重绘或卡顿。
4. 可访问性差：对于屏幕阅读器等辅助工具来说，不断滚动的内容可能造成困扰。
5. 已被标准废弃：这是最致命的一点。使用一个废弃的特性，意味着你的代码失去了未来的保障，也显得很不专业。

所以，我的结论很明确：除非是应付一个明天就要下线的临时页面，否则在任何正经项目中，都不要再使用 <marquee> 标签了。 它就像一把生锈的螺丝刀，虽然还能拧螺丝，但我们已经有了更好用的电动螺丝批。

3. 方案二：CSS3 Animation 实现文字无缝滚动

既然传统标签不行，我们自然把目光投向了现代 CSS 的核心动力——CSS3 Animation。用 CSS 来做动画，性能通常比 JavaScript 直接操作样式要好，因为浏览器可以对动画进行优化（比如使用硬件加速）。实现一个基础的水平滚动文字跑马灯，思路非常清晰。

核心原理：我们准备两份一模一样的内容，将它们首尾相接。通过 CSS 动画，控制承载内容的容器横向移动。当第一份内容完全移出视线时，第二份内容正好接替它的位置。由于两份内容一样，用户看到的就是一个无限循环的幻觉。

先看一个最基础的示例，假设我们的 HTML 结构如下：

<div class="marquee-container">
  <div class="marquee-content">
    <span>实时快讯：沪指震荡上行，科技板块表现活跃；国际油价小幅回落；公司新产品发布会将于下周举行。</span>
    <!-- 这是重复的一份，用于无缝衔接 -->
    <span aria-hidden="true">实时快讯：沪指震荡上行，科技板块表现活跃；国际油价小幅回落；公司新产品发布会将于下周举行。</span>
  </div>
</div>

注意，我们给第二个 <span> 加上了 aria-hidden="true"，这对辅助工具隐藏了重复内容，提升可访问性。对应的 CSS 是关键：

.marquee-container {
  width: 100%;
  overflow: hidden; /* 隐藏溢出的内容 */
  white-space: nowrap; /* 防止文字换行 */
  background-color: #f5f7fa;
  padding: 10px 0;
}

.marquee-content {
  display: inline-block;
  animation: marquee 20s linear infinite;
  /* 鼠标悬停暂停是一个很好的交互细节 */
}
.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transfor