可通过五种方式实现网页文字自动滚动：一、过时但兼容的 marquee 标签；二、符合现代标准的 css 动画；三、灵活可控的javaScript 方案；四、基于 scroll-snap 的分段跳变式；五、轻量第三方库 Marquee.js。
如果您希望在网页中实现文字自动滚动的视觉效果，即传统意义上的跑马灯效果，则可以通过多种 html 与 CSS 结合的方式达成。以下是几种可行的实现方案：
一、使用 marquee 标签实现
marquee 标签是 HTML 早期原生支持滚动内容的元素，虽已被现代标准标记为过时，但在多数 浏览器 中仍可正常渲染，适合快速简易部署。
1、在 HTML 文档的 body 内插入
2、通过添加 direction 属性控制滚动方向，例如 direction=”left” 表示向左滚动，direction=”right” 表示向右滚动。
立即学习 “ 前端免费学习笔记（深入）”；
3、通过 behavior 属性设定滚动行为，设置 behavior=”scroll” 为连续平滑滚动，behavior=”slide” 为单次滑入后停止，behavior=”alternate” 为来回往复滚动。
4、通过 scrollamount 属性调整滚动速度，数值越大滚动越快，例如 scrollamount=”3″。
5、通过 scrolldelay 属性设置每次滚动的时间间隔（毫秒），例如 scrolldelay=”100″。
6、为提升兼容性与语义清晰度，建议包裹在
二、使用 css 动画 实现
CSS 动画方式完全符合现代 web 标准，具备更高可控性与可维护性，且支持 响应式设计 与无障碍访问优化。
1、创建一个容器元素，例如
，并在其中嵌套一行文本或多个内联元素。
2、为该容器设置 white-space: nowrap; 以防止文字换行，同时设置overflow: hidden; 隐藏超出部分。
3、为内部文字元素设置 display: inline-block; 并应用animation 属性，调用自定义 @keyframes 动画。
4、在 @keyframes 中定义 from 状态为transform: translateX(100%);，to 状态为 transform: translateX(-100%);，形成从右至左的位移效果。
5、设置 animation-duration 为滚动完整周期所需时间，例如 30s；animation-timing-function为 linear 以保证匀速；animation-iteration-count为 infinite 实现无限 循环。
6、为避免首尾衔接处出现空白间隙，可在内部文字后重复一次相同内容，或使用 padding-right 配合 伪元素 补全视觉流。
三、使用 javascript 动态控制滚动
JavaScript 方案适用于需要实时更新内容、响应用户交互或精确控制启停时机的场景，灵活性最高。
1、创建一个固定宽度的容器，例如
。
2、获取该容器及内部文本元素的 dom 引用，例如const container = document.getElementById(‘js-marquee’); const text = container.querySelector(‘span’);
3、克隆 text 节点并追加到 container 末尾，形成双份内容以支撑无缝循环。
4、初始化偏移量变量 offset = 0，设定滚动步长 step = 0.5，定时器间隔 interval = 30ms。
5、使用 requestAnimationFrame 或 setInterval 驱动循环，每次更新 container.style.transform = ‘translateX(‘ + (-offset) + ‘px)’;
6、当 offset 大于等于文本总宽度时，重置 offset 为 0 并清除已应用的 transform，避免数值过大影响性能。
四、使用 CSS scroll-snap 与滚动容器模拟
该方法利用 CSS 滚动容器特性与 scroll-snap-align，通过强制滚动位置对齐实现分段式“跳变”跑马灯，适用于展示卡片式条目。
1、创建一个具有 overflow-x: auto; 和 scroll-behavior: smooth; 的外层容器。
2、在容器内放置多个并排的子元素，每个子元素设置flex: 0 0 auto; 及 width: fit-content;。
3、为每个子元素设置 scroll-snap-align: start;，并在外层容器上启用 scroll-snap-type: x mandatory;。
4、使用 JavaScript 在指定时间间隔后调用 element.scrollBy({left: element.clientWidth, behavior: ‘smooth’});
5、当滚动至末尾时，通过 scrollTo({left: 0, behavior: ‘instant’})重置至起始位置，形成循环效果。
6、为防止用户手动拖拽干扰自动滚动，可在滚动开始前添加pointer-events: none;，并在动画帧结束后恢复。
五、使用第三方轻量库 Marquee.js
Marquee.js 是一个专为跑马灯设计的微型 JavaScript 库，仅约 2KB，无依赖，提供暂停、加速、反向等内置控制 接口。
1、通过 script 标签引入 Marquee.js 文件，或使用npm install marquee-js 后 import 引入。
2、为待滚动区域添加唯一 id，例如
。
3、在页面加载完成后执行 new Marquee(document.getElementById(‘marquee-container’), {direction: ‘left’, speed: 2});
4、speed 参数控制每秒移动像素数，direction 可选 ’left’、’right’、’up’、’down’，默认为 ’left’。
5、调用实例方法。pause()可临时停止滚动，.resume()恢复，.togglePause()切换状态。
6、若需多实例共存，应为每个容器分别初始化独立 Marquee对象，并保存其引用以便后续控制。
