<marquee> 标签已废弃，HTML5 中被移除，无标准支持、无障碍支持差、浏览器兼容性差；推荐用 CSS animation + @keyframes 或 JavaScript requestAnimationFrame 实现可控、可访问、高性能的滚动效果。
<marquee> 标签已废弃，不推荐在现代项目中使用。它在 HTML5 中被正式移除，Chrome、Firefox、Safari 等主流浏览器虽仍能解析渲染，但无标准支持、无事件控制、无 CSS 动画兼容性，且无法通过无障碍 API 访问。真正需要跑马灯效果时，应改用 CSS animation + @keyframes 或 JavaScript 控制。
为什么 <marquee> 会出问题
常见现象包括：滚动突然卡顿、暂停/重启不可控、移动端触摸后失灵、SEO 友好性差、屏幕阅读器完全忽略内容。更关键的是，behavior、direction、scrollamount 等属性没有对应 CSS 替代方案，且不同浏览器对这些非标属性的解析差异极大。
例如设置 <marquee direction="left" scrollamount="3">文字</marquee>，在 Safari 中可能滚动过快，在 Firefox 中则默认减速；而一旦页面启用 prefers-reduced-motion，<marquee> 完全不响应系统偏好。
CSS 实现横向无限滚动（推荐）
用纯 CSS 实现可预测、可访问、可暂停的滚动效果，核心是利用 transform: translateX() 配合 animation 循环位移：
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee-inner {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
要点说明：
-
padding-left: 100%是为了让初始文本从右边界开始入场，避免闪动 - 动画时长
20s可根据容器宽度和字体大小动态调整，太短易眩晕，太长显停滞 - 必须加
will-change: transform或transform: translateZ(0)触发 GPU 加速，否则长文本滚动掉帧明显 - 如需暂停，监听
hover并设置animation-play-state: paused即可
JavaScript 方案：精准控制启停与速度
当需要响应用户操作（如点击切换方向、拖拽暂停、动态修改速度）时，CSS 动画不够灵活，此时用 requestAnimationFrame 手动驱动更可靠：
关键逻辑是维护一个 offset 变量，每帧递增，并用 element.style.transform = `translateX(${offset}px)` 更新位置；超出范围后重置偏移，形成无缝循环。
容易踩的坑：
- 直接用
setInterval控制位移会导致帧率不稳定，尤其在后台标签页中定时器被节流 - 未做
getBoundingClientRect()边界检测，滚动到末尾时出现空白间隙 - 未监听
visibilitychange事件，在页面切走时继续动画，浪费资源 - 未处理 RTL（从右向左）语言场景，
direction: rtl下需反转位移方向
真正难的不是让字动起来，而是让动得稳、停得准、读得见、缩放时不撕裂——这些细节决定了它是“能用”还是“敢上线”。
