标签已彻底失效，因Chrome、Firefox、Safari（17+）移除解析逻辑且W3C未纳入HTML5；CSS可实现无JS水平滚动，需复制内容、用transform动画；JS用于暂停、动态加载等交互，须避免scrollLeft、用requestAnimationFrame；垂直滚动改translateY，响应式需适配单位与事件。
<marquee></marquee> 标签不能用，主流浏览器已完全不渲染——不是“不推荐”，是根本无效。
为什么 <marquee></marquee> 会失效
Chrome、Firefox、Safari（17+）已移除对 <marquee></marquee> 的解析逻辑；W3C 从未将其纳入 HTML5 规范。它没有语义、无法键盘聚焦、屏幕阅读器跳过、aria-hidden 也修不了可访问性缺陷；所有控制（如 scrollamount、behavior）都是非标准属性，CSS 无法覆盖。
CSS 实现水平滚动字幕（无 JS）
适合新闻条、公告栏等静态内容，性能好、零 JS 依赖，但需手动拼接内容实现无缝：
- 父容器必须设
overflow: hidden和white-space: nowrap - 子元素用
display: inline-block，宽度要 ≥ 内容总长（常用技巧：复制一遍文字） - 动画必须用
transform: translateX()，避免触发布局重排 -
@keyframes起点设为translateX(100%)，终点设为translateX(-100%)，且animation-timing-function: linear
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="marquee">
<div class="marquee-content">
前端日报 · Vue 3.5 发布 | CSS @layer 支持落地 | WebGPU 进入 Stable
前端日报 · Vue 3.5 发布 | CSS @layer 支持落地 | WebGPU 进入 Stable
</div>
</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%); }
}
JS 控制滚动节奏与交互（停顿/动态加载）
纯 CSS 无法响应鼠标悬停、点击暂停、或运行时追加新条目——这时必须用 JS，但别碰 scrollLeft：
- 用
requestAnimationFrame驱动transform位移，比setInterval更顺滑 - 暂停逻辑靠
animation-play-state: paused切换，而非清除定时器 - 动态加载新内容时，要在动画末尾前插入并重置动画，否则会卡顿或跳帧
- 若需精确控制滚动位置（如同步歌词），得用
getComputedStyle(el).transform解析矩阵
垂直滚动和响应式适配的坑
垂直滚动改用 translateY() 即可，但要注意：
-
height必须固定，overflow: hidden才有效；用min-height会漏出内容 - 移动端手指滑动时，
hover失效，暂停逻辑得同时监听touchstart和mouseenter - 字体缩放或 viewport 缩放后，动画速度感知会变——别用 px 定时，改用
100vw或ch单位控制内容密度
真正难的不是让字动起来，而是让动得稳、停得准、加得顺、读得清——尤其是当内容长度不可控、设备种类多、还要过无障碍检测时。
