marquee标签已废弃，现代项目中不该用它实现文字滚动——它不支持无障碍、无法用css动画控制、在safari或旧android webview中行为不一致，且w3c明确不收录。
marquee 标签已废弃，现代项目中不该用它实现文字滚动——它不支持无障碍、无法用 CSS 动画控制、在 Safari 或旧 Android WebView 中行为不一致，且 W3C 明确不收录。
为什么 marquee 不能用了
浏览器虽大多还能渲染 marquee，但本质是“兼容性残留”，不是标准行为：
• 屏幕阅读器通常跳过或误读内容，违反 WCAG 2.1；
• 无法响应 :hover 暂停、无法动态改速、不能监听滚动位置；
• direction="up" 在部分 iOS Safari 版本中会卡顿或直接失效；
• onmouseover="this.stop()" 是内联 JS，不符合现代分离关注点原则，且在 CSP 严格策略下会被拦截。
CSS @keyframes + transform 是当前唯一推荐方案
核心是让文字在固定容器内匀速位移，靠 overflow: hidden 截断溢出，用 white-space: nowrap 防换行：
• 必须设 overflow: hidden 在父容器上，否则滚动文字会撑开布局；
• 动画时长要匹配内容宽度：太短（如 animation-duration: 2s）会闪退，太长（如 60s）像静止；建议用 calc(0.05s * var(--chars)) 动态估算；
• animation-timing-function: linear 不可省略，否则默认 ease 会导致启停抖动；
• 关键帧终点必须等于起点视觉长度，例如从 translateX(100%) 到 translateX(-100%)，否则衔接处出现空白；
• 若需无缝循环，可在 HTML 中复制一次文本，或用伪元素补全：::after { content: "重复文字"; }
JS 控制暂停/反向/动态改速的实操要点
纯 CSS 做不到交互响应，这时 JS 是必要补充，但别重写整个动画逻辑：
• 暂停/恢复用 element.style.animationPlayState = 'paused' / 'running'，比删 class 更轻量；
• 改速优先改 element.style.animationDuration（如 '15s'），不要重定义 @keyframes；
• 反向滚动直接切 animation-direction: reverse，比翻转 transform 值更稳定；
• 避免在 scroll 或 mousemove 中高频写 style，会触发重排；简单 hover 暂停用 CSS :hover 就够了；
• 如果文字内容会动态更新（如实时行情），记得重置动画：el.style.animation = 'none'; setTimeout(() => { el.style.animation = ''; }, 10);
移动端和老浏览器的几个硬伤
不是所有“能跑”就等于“能稳跑”：
• Android 4.4 及更早 WebView 对 transform: translateX() 的硬件加速支持差，滚动易闪烁，需加 will-change: transform 强制提升图层；
• IE10–11 要加 @-webkit-keyframes 和 -webkit-animation 前缀，但 IE 已于 2023 年 6 月终止支持，新项目可忽略；
• iOS Safari 对 animation-iteration-count: infinite 在页面后台标签页中可能暂停，需监听 visibilitychange 手动恢复；
• 真正难搞的是垂直滚动（direction: up）：CSS 方案要用 top 或 translateY()，但 top 触发重排，translateY() 在某些安卓低端机上仍有掉帧——此时不如改用 scroll-snap-type 分段跳变，牺牲“平滑”换“稳定”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
