已被 HTML5 废弃，存在语义缺失、可访问性差、兼容性问题（Firefox 默认禁用、Chrome 120+ 警告）及 JS 动态插入报错等风险；推荐用 CSS @keyframes + transform: translateX 实现可控滚动，支持悬停暂停、多行错帧轮播，并需注意容器溢出隐藏、动画时长适配与性能优化。
标签在现代浏览器中已废弃，且不被 HTML5 规范支持。直接使用它会导致语义错误、可访问性问题，以及在部分浏览器（如 Firefox）中完全不渲染或行为异常。
为什么
它没有语义含义，无法被屏幕阅读器正确识别；不响应 CSS 动画控制；不支持暂停/交互；且 Chrome 120+ 已开始警告其使用。实际项目中遇到“跑马灯失效”“文字不动”“控制不了速度”，大概率就是卡在这儿了。
- 错误现象：
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'（某些 JS 框架动态插入时触发） - 兼容性：Firefox 自 76 版起默认禁用，需手动启用
layout.css.marquee.enabled（仅限调试） - 移动端：Safari 和 Android WebView 基本不支持或表现不可控
CSS @keyframes + animation 替代方案
这是目前最轻量、可控、语义清晰的实现方式。核心是把文字容器设为超出父容器宽度，并用 translateX 水平位移模拟滚动。
- 必须设置父容器
overflow: hidden，否则滚动内容会溢出显示 - 动画时长要根据文字长度动态计算，否则短文本会“闪退”，长文本会过慢——建议用
calc(1s * var(--length))或 JS 注入 - 避免用
margin-left或left动画，性能差（触发布局重排）
.marquee {
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
需要暂停/鼠标悬停控制？加 :hover 和 animation-play-state
纯 CSS 就能实现交互控制，无需 JS。但注意：animation-play-state 对 @keyframes 必须作用于同一元素，不能只写在父容器上。
- 常见错误：给
.marquee设hover，但动画写在.marquee span上 → 悬停无效 - 正确做法：悬停目标和动画元素一致，或用
.marquee:hover span - 若需点击暂停，就必须用 JS 切换 class（CSS 本身不支持 click 触发）
.marquee:hover span {
animation-play-state: paused;
}
多行/多组文字滚动？别嵌套 span 并行动画
想实现“新闻列表式”多行轮播，不要试图用多个 或 JS 定时替换 DOM。更稳的方式是：固定高度容器 + flex 垂直排列 + 各自独立动画，用不同 animation-delay 错开起始时间。
- 每行文字用单独
span，避免用display: block导致换行破坏滚动流 - 动画延迟值建议用 JS 动态生成，避免硬编码导致新增条目后节奏错乱
- 如果内容来自 API，务必等文字渲染完成后再启动动画，否则初始位置可能偏移
真正难的不是让字动起来，而是让动得稳、停得准、适配各种字体大小和屏幕宽度。很多“跑马灯一上线就卡顿”，问题不在动画本身，而在没限制容器尺寸或忘了加 will-change: transform 提升图层。
