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% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* 移动整个内容宽度的一半，因为有两份 */
  }
}

这样，一个最简单的跑马灯就完成了。但是，这个方案有个大问题：动画时长是固定的（20s）。如果我们的新闻短，比如只有“快讯：会议开始”，它会滚得飞快；如果新闻特别长，又会滚得很慢。这在实际项目中是不可接受的，因为后台传过来的数据长度是随机的。

进阶：动态计算动画时长 为了解决这个问题，我们必须用 JavaScript 来辅助。思路是：计算出单份内容的实际宽度，然后根据我们期望的“滚动速度”（比如每秒滚动100像素）来动态设置动画的持续时间。

function initMarquee() {
  const container = document.querySelector('.marquee-container');
  const content = document.querySelector('.marquee-content span:first-child');
  // 克隆一份内容
  const clone = content.cloneNode(true);
  clone.setAttribute('aria-hidden', 'true');
  document.querySelector('.marquee-content').appendChild(clone);

  // 计算宽度和所需时间
  const contentWidth = content.scrollWidth;
  const containerWidth = container.offsetWidth;
  // 如果内容宽度小于容器宽度，可能不需要滚动，这里我们假设需要
  const totalWidth = contentWidth * 2; // 两份内容的总宽度
  const speedPxPerSec = 100; // 期望的滚动速度，像素/秒
  const duration = totalWidth / speedPxPerSec;

  // 动态设置动画时长
  const marqueeContent = document.querySelector('.marquee-content');
  marqueeContent.style.animationDuration = `${duration}s`;
  // 同时需要更新 @keyframes 中的 translateX 值，因为总宽度变了
  // 更优的做法是使用 CSS 变量
  marqueeContent.style.setProperty('--content-width', `${contentWidth}px`);
}

然后在 CSS 中配合使用 CSS 自定义属性（变量）：

.marquee-content {
  display: inline-block;
  animation: marquee linear infinite;
  animation-play-state: running;
}
.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--content-width, 0px)));
  }
}

这样，无论内容长短，跑马灯都能以大致恒定的视觉速度进行滚动了。我在实际项目中常用这个方案，它比纯 CSS 方案多了一点 JS，但换来了极强的适应性。

4. 方案三：CSS3 Animation 实现列表无限滚动

文字滚动是单行，而在大屏展示中，更常见的是列表滚动，比如不断轮播的排行榜、实时交易流水、监控日志等。这就像是把多个“跑马灯条”垂直堆叠起来，一起向上或向下滚动。

需求分析：一个典型的列表滚动需要支持：1) 每页固定显示 N 条（比如5条）；2) 列表项高度固定；3) 所有条目无限循环滚动；4) 数据更新后动画能重新开始。

实现这种效果，CSS3 Animation 依然是主力。核心技巧和文字滚动类似，但需要更精确的尺寸计算。我们来看一个 Vue 单文件组件的示例，这比纯展示代码更贴近实战：

<template>
  <div class="list-scroll-container" ref="container">
    <ul class="list-scroll-content" :style="contentStyle" @mouseenter="pause" @mouseleave="resume">
      <!-- 渲染原始数据 -->
      <li v-for="(item, index) in listData" :key="'orig-' + index">
        <div class="list-item">{{ item.text }}</div>
      </li>
      <!-- 关键：再渲染一份完全一样的数据，用于无缝衔接 -->
      <li v-for="(item, index) in listData" :key="'dup-' + index" aria-hidden="true">
        <div class="list-item">{{ item.text }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: Array, // 传入的列表数据
    visibleCount: { type: Number, default: 5 }, // 每页可见条数
    itemHeight: { type: Number, default: 60 }, // 每条高度
    scrollSpeed: { type: Number, default: 1 } // 滚动速度系数
  },
  data() {
    return {
      listData: [],
      animationDuration: '0s'
    };
  },
  computed: {
    contentStyle() {
      return {
        // 内容总高度是 (数据条数 * 2) * 单条高度
        height: `${this.listData.length * 2 * this.itemHeight}px`,
        animationDuration: this.animationDuration,
        animationPlayState: 'running'
      };
    }
  },
  mounted() {
    this.listData = this.data;
    this.calcAnimation();
  },
  watch: {
    data(newVal) {
      // 数据变化时，重置动画
      this.listData = newVal;
      this.$nextTick(() => {
        this.calcAnimation();
      });
    }
  },
  methods: {
    calcAnimation() {
      if (this.listData.length <= this.visibleCount) {
        // 数据量不足一屏，不需要滚动
        this.animationDuration = '0s';
        return;
      }
      // 计算动画时间：总移动距离 / 速度
      // 总移动距离：一份完整数据的高度（listData.length * itemHeight）
      // 我们希望的速度：每秒滚动 itemHeight * scrollSpeed 像素
      const totalDistance = this.listData.length * this.itemHeight;
      const speedPerSec = this.itemHeight * this.scrollSpeed;
      const duration = totalDistance / speedPerSec;
      this.animationDuration = `${duration}s`;
    },
    pause() {
      // 通过修改样式暂停动画
      const content = this.$refs.container.querySelector('.list-scroll-content');
      if (content) content.style.animationPlayState = 'paused';
    },
    resume() {
      const content = this.$refs.container.querySelector('.list-scroll-content');
      if (content) content.style.animationPlayState = 'running';
    }
  }
};
</script>

<style scoped>
.list-scroll-container {
  height: calc(v-bind(itemHeight) * v-bind(visibleCount) * 1px);
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}
.list-scroll-content {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: listScroll linear infinite;
}
@keyframes listScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 向上移动一整份数据的高度 */
    transform: translateY(calc(-1 * v-bind(itemHeight) * v-bind('listData.length') * 1px));
  }
}
.list-item {
  height: calc(v-bind(itemHeight) * 1px - 10px);
  line-height: calc(v-bind(itemHeight) * 1px - 10px);
  margin: 5px;
  padding: 0 10px;
  background: #f0f9ff;
  border-radius: 4px;
}
</style>

这个组件已经具备了很强的实用性。它通过 visibleCount 和 itemHeight 确定视窗大小，通过 scrollSpeed 控制快慢。数据更新时，利用 Vue 的响应式系统和 watch 监听，自动重新计算动画。鼠标交互也是通过控制 CSS 的 animation-play-state 属性轻松实现。我在多个数据大屏项目里封装了类似的组件，稳定性和效果都非常好。

5. 方案四：JavaScript 动态控制实现极致灵活

CSS3 Animation 虽然强大且性能优异，但它的控制粒度有时还是不够细。比如，我们想要实现非线性的滚动速度（先快后慢），或者需要与复杂的用户交互深度结合（比如用手指或鼠标拖动列表，松手后惯性滚动），这时候纯 CSS 就有点力不从心了。这时，就该 JavaScript 亲自上场，通过定时器或 requestAnimationFrame 来动态计算并设置元素的位置。

核心武器：requestAnimationFrame。这是实现流畅动画的黄金API，它会在浏览器下一次重绘之前执行回调函数，比传统的 setInterval 或 setTimeout 更精准、更节能。

我们来实现一个可以手动滚动、并且松手后惯性滚动的列表。这个效果在移动端或触控大屏上体验尤其出色。

<div class="interactive-scroll-container" id="scrollContainer">
  <div class="scroll-content" id="scrollContent">
    <!-- 数据项，这里只放一份，不需要重复 -->
    <div class="data-item">数据条目 1</div>
    <div class="data-item">数据条目 2</div>
    <!-- ... 更多条目 -->
  </div>
</div>

class InteractiveMarquee {
  constructor(containerId, contentId) {
    this.container = document.getElementById(containerId);
    this.content = document.getElementById(contentId);
    this.isScrolling = false;
    this.animationId = null;
    this.speed = 0;
    this.friction = 0.95; // 摩擦力系数
    this.minSpeed = 0.1;
    this.lastY = 0;
    this.timestamp = 0;

    // 初始化：复制一份内容以实现无缝循环
    this.setupContent();
    // 绑定事件
    this.bindEvents();
    // 开始自动滚动
    this.startAutoScroll();
  }

  setupContent() {
    // 克隆所有子节点并追加
    const children = Array.from(this.content.children);
    children.forEach(child => {
      const clone = child.cloneNode(true);
      clone.setAttribute('aria-hidden', 'true');
      this.content.appendChild(clone);
    });
    // 设置内容区域高度为原来的两倍
    this.content.style.height = '200%';
  }

  bindEvents() {
    let startY = 0;
    let isDragging = false;

    this.container.addEventListener('mousedown', (e) => {
      isDragging = true;
      startY = e.clientY;
      this.stopAutoScroll(); // 手动交互时停止自动滚动
      e.preventDefault();
    });

    window.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      const deltaY = e.clientY - startY;
      startY = e.clientY;
      // 根据拖动距离直接设置滚动位置
      this.container.scrollTop += deltaY;
      // 同时记录一个瞬时速度，用于惯性计算
      this.speed = deltaY / (Date.now() - this.timestamp);
      this.timestamp = Date.now();
    });

    window.addEventListener('mouseup', () => {
      if (!isDragging) return;
      isDragging = false;
      // 开始惯性滚动
      this.startInertialScroll();
    });

    // 触摸事件支持（用于移动端/触屏）
    this.container.addEventListener('touchstart', (e) => {
      isDragging = true;
      startY = e.touches[0].clientY;
      this.stopAutoScroll();
    }, { passive: false });

    this.container.addEventListener('touchmove', (e) => {
      if (!isDragging) return;
      const deltaY = e.touches[0].clientY - startY;
      startY = e.touches[0].clientY;
      this.container.scrollTop += deltaY;
      this.speed = deltaY / (Date.now() - this.timestamp);
      this.timestamp = Date.now();
      e.preventDefault();
    }, { passive: false });

    this.container.addEventListener('touchend', () => {
      isDragging = false;
      this.startInertialScroll();
    });
  }

  startAutoScroll() {
    const autoScroll = () => {
      // 缓慢匀速向下滚动
      this.container.scrollTop += 0.5;
      // 实现无缝循环：当滚动到一半（即克隆内容开始显示）时，瞬间跳回开头
      if (this.container.scrollTop >= this.content.scrollHeight / 2) {
        this.container.scrollTop = 0;
      }
      this.animationId = requestAnimationFrame(autoScroll);
    };
    this.animationId = requestAnimationFrame(autoScroll);
  }

  stopAutoScroll() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
      this.animationId = null;
    }
  }

  startInertialScroll() {
    const inertialScroll = () => {
      if (Math.abs(this.speed) < this.minSpeed) {
        this.speed = 0;
        // 惯性停止后，重新开始自动滚动
        this.startAutoScroll();
        return;
      }
      // 应用速度并衰减
      this.container.scrollTop += this.speed;
      this.speed *= this.friction;

      // 无缝循环检查
      const totalHeight = this.content.scrollHeight / 2;
      if (this.container.scrollTop >= totalHeight) {
        this.container.scrollTop -= totalHeight;
      } else if (this.container.scrollTop < 0) {
        this.container.scrollTop += totalHeight;
      }

      this.animationId = requestAnimationFrame(inertialScroll);
    };
    this.animationId = requestAnimationFrame(inertialScroll);
  }
}

// 初始化
new InteractiveMarquee('scrollContainer', 'scrollContent');

这个方案代码量上去了，但带来的交互体验是质的飞跃。它融合了自动滚动、手动拖拽、惯性滚动和无缝循环。我在一些需要现场演示、客户可能会上手操作的交互大屏上，就采用了类似的方案，反响很好。它证明了，当 CSS 动画的声明式语法无法满足复杂交互逻辑时，用 JavaScript 进行命令式的精细控制，是唯一的选择。

6. 技术选型策略与实战场景分析

好了，现在我们手上有好几套方案了：被淘汰的 <marquee>、灵活的 CSS3 Animation（文字/列表）、以及强大的 JavaScript 动态控制。在实际项目中到底该怎么选？这不能凭感觉，得根据具体的场景和需求来定。我画了一个简单的决策流程图，你可以存下来参考：

                               开始
                                 |
               是否需要复杂交互（拖拽、惯性、非线性动画）？
              /                                                  \
            是                                                   否
             |                                                   |
    ┌----------------------┐                        数据内容是文本还是列表？
    | JavaScript 动态控制方案 |                        /                    \
    └----------------------┘                      文本                   列表
             |                                   |                        |
     适用于：交互式数据大屏、                    ┌-------------┐      ┌-------------------┐
     触摸屏应用、游戏UI等。                     | CSS3 文字滚动 |     | CSS3 列表滚动方案 |
                                             └-------------┘      └-------------------┘
                                                     |                        |
                                             适用于：单行公告、        适用于：排行榜、交易流水、
                                             新闻标题栏、字幕。        监控日志、消息轮播。

场景一：简单的文字公告或新闻标题栏

• 需求：一行文字，从左到右或从右到左无限滚动。内容可能变化，但交互简单（最多悬停暂停）。
• 选型：CSS3 文字滚动方案（方案二）。优先使用纯 CSS 实现，如果内容长度变化大，辅以少量 JavaScript 动态计算动画时长。这是性能、代码简洁度和效果的最佳平衡点。完全没必要动用复杂的 JS 库。

场景二：后台数据监控面板或金融交易流水

• 需求：垂直滚动的列表，每页显示固定行数（如10行），数据实时更新，需要无缝循环，鼠标悬停可暂停查看详情。
• 选型：CSS3 列表滚动方案（方案三）。利用 CSS Animation 实现滚动，利用 Vue/React 等框架的响应式特性处理数据更新。这是最高效、最稳定的方案。我在智慧城市指挥中心的项目里，就用这种方案来滚动显示实时报警信息，非常可靠。

场景三：展厅互动大屏或数据可视化触摸屏

• 需求：除了自动滚动，用户可能想用手指滑动查看被滚走的内容，松手后列表还能继续惯性滚动一段距离，最后恢复自动滚动。
• 选型：JavaScript 动态控制方案（方案四）。这是唯一的选择。你需要用 requestAnimationFrame 和触摸事件来打造完整的交互体验。虽然开发成本高，但带来的用户体验提升是巨大的，特别适合在展会、展厅等需要与观众互动的场合。

关于性能的坑我踩过不少：CSS3 动画的 transform 和 opacity 属性通常会被浏览器优化，触发硬件加速，性能最好。而像用 JavaScript 频繁修改 scrollTop 或 marginTop，可能会引起大量的重排（Reflow），在数据项很多时容易卡顿。所以，能用 CSS 动画解决的，尽量用 CSS。只有当交互复杂到 CSS 无法表达时，才考虑用 JavaScript 接管。

无缝滚动的核心要点：无论用哪种方案，实现“无缝”的关键都在于内容的重复。你需要至少两份相同的内容首尾相接，当第一份内容即将滚出视线时，动画正好将其移回起始点，由于视觉上是连续的内容，用户就察觉不到跳变。计算动画的位移距离和时长时，一定要以“一份完整内容的尺寸”为基准。

7. 避坑指南与最佳实践

讲完了方案和选型，最后分享一些我踩过的“坑”和总结的最佳实践，希望能帮你少走弯路。

坑一：滚动闪烁或跳变 这个问题在早期尝试无缝滚动时经常遇到。原因通常是：两份内容之间有空隙（margin/padding），或者容器有边框，导致衔接不完美。解决方案：确保滚动内容容器（比如那个 ul 或 div）的 margin 和 padding 都为0，让子项紧密排列。视觉上的间距应该加在子项内部元素上。

坑二：数据更新后动画不重置 用 Vue/React 时，数据源更新了，但动画还停留在上一轮的状态，看起来很奇怪。解决方案：在数据变化的监听钩子（如 Vue 的 watch）里，先强制取消当前动画（可以移除再添加动画类名，或者重置 animation 属性），然后重新计算并启动新动画。前面方案三的 Vue 组件示例已经演示了这一点。

坑三：移动端卡顿 在手机上跑，感觉滚动不跟手，或者很卡。解决方案：

1. 使用 transform: translate3d(x, y, z) 而不是 translateX/Y，前者更能触发GPU加速。
2. 为动画元素加上 will-change: transform 提示浏览器提前优化。
3. 确保图片等资源已优化，避免滚动过程中加载和解码大图。
4. 对于复杂的 JS 滚动方案，注意在 touchmove 事件中使用 { passive: false } 选项时要谨慎，并做好防抖。

坑四：可访问性被忽略 跑马灯内容对于视力障碍用户可能是个噩梦。最佳实践：

1. 为重复的、用于视觉衔接的 DOM 元素添加 aria-hidden="true"，防止屏幕阅读器重复朗读。
2. 提供明确的暂停、播放控制按钮（不仅限于鼠标悬停），并确保这些按钮可以通过键盘访问。
3. 考虑在页面加载时，动画暂停几秒，让用户有时间阅读初始内容。

最佳实践总结：

1. 渐进增强：先确保内容在没有动画的情况下也是可读、可用的，然后再加上动画效果。
2. 性能优先：首选 CSS 解决方案，充分利用浏览器的动画优化。
3. 动态计算：动画参数（时长、距离）应根据实际内容动态计算，避免写死。
4. 资源释放：使用 requestAnimationFrame 时，一定要在组件销毁或页面离开时用 cancelAnimationFrame 清除定时器。
5. 测试充分：在不同长度的数据、不同的屏幕尺寸、以及 CPU 受限的模拟环境下进行测试，确保效果稳定。

跑马灯动画看似简单，但要想做得流畅、稳健、体验好，里面有不少门道。从被淘汰的 <marquee> 到如今灵活的 CSS3 和 JS 方案，技术的演进让我们能创造出越来越好的用户体验。希望这些从实战中总结的经验和代码，能让你下次遇到类似需求时，心里更有底，手上有方案。记住，没有最好的方案，只有最适合当前场景的方案。多思考需求，多动手尝试，你也能打造出令人眼前一亮的效果。