marquee标签已被W3C从HTML5规范中彻底移除，Chrome、Firefox、Safari等主流浏览器已弃用或完全不渲染，因其无语义、不可访问、无法交互且不支持CSS控制；推荐用CSS @keyframes + transform: translateX()实现高性能滚动，配合overflow: hidden、white-space: nowrap及无缝内容拼接，并通过animation-play-state实现暂停等交互。
marquee 标签已被所有主流浏览器弃用，不是“不推荐”，而是根本不会被规范支持——它没有语义、无法访问、不能暂停/控制、不响应用户交互，且会干扰屏幕阅读器的线性阅读流。
marquee 为什么在现代页面里必须替换
- 它是 HTML 3.2 时代的遗留标签，W3C 从未将其纳入 HTML5 规范
- Chrome、Firefox、Safari 已明确标记为“deprecated”，部分版本（如 Safari 17+）已完全移除渲染逻辑
-
marquee内容无法被键盘焦点访问，aria-hidden="true"也无法修复其可访问性缺陷 - 没有 API 控制：不能用 JS 获取滚动位置、不能监听暂停事件、不能动态追加内容
- 所有样式（如速度、方向）都靠非标准属性（
behavior、scrolldelay），CSS 无法覆盖或继承
用 CSS @keyframes + transform 实现等效跑马灯
适合静态文本/图标循环、新闻条、广告横幅等轻量场景，性能好、无 JS 依赖：
- 必须用
transform: translateX()（或translateY()），避免触发布局重排 - 动画需设置
infinite和linear，否则会出现卡顿或跳帧 - 父容器设
overflow: hidden，子元素宽度要足够容纳完整滚动内容（常需复制一份内容拼接） - 示例结构：
<div class="marquee"> <span class="marquee-content">前端日报 · Vue 3.5 发布｜CSS @layer 支持落地｜WebGPU 进入 Stable</span> <span class="marquee-content">前端日报 · Vue 3.5 发布｜CSS @layer 支持落地｜WebGPU 进入 Stable</span> </div>
对应 CSS：.marquee { overflow: hidden; white-space: nowrap; } .marquee-content { display: inline-block; animation: scroll-left 20s linear infinite; } @keyframes scroll-left { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
用 JavaScript 控制滚动节奏和交互行为
当需要暂停/播放、鼠标悬停暂停、动态加载新条目、或与滚动容器联动时，纯 CSS 不够用：
- 不要用
scrollLeft做连续动画（触发频繁重排，卡顿明显），改用requestAnimationFrame+transform - 暂停逻辑建议用
animation-play-state: paused切换，而非清除/重设动画 - 鼠标移入时加 class：
.marquee:hover .marquee-content { animation-play-state: paused; } - 动态追加内容后，需重置动画：先移除 class 触发 reflow，再加回，或用
animation: none瞬间重置后恢复 - 注意：若内容高度不固定，
transform滚动可能造成文字模糊（尤其是小字号），可加will-change: transform提前升层，但别滥用
容易被忽略的三个细节
-
marquee默认是“无缝循环”，CSS 动画要模拟这点，必须让内容长度 ≥ 容器宽度 × 2，否则会出现空白断点 - 屏幕阅读器仍会读出滚动中的文字，但顺序混乱；应在
.marquee上加aria-live="off"并提供静态摘要区域 - 移动端 touch 操作无法自然拖拽滚动，如需此能力，得上
touchstart/touchmove+ 手势位移计算，marquee原生也不支持
