<marquee>标签已失效，必须用CSS动画或JS实现滚动效果；CSS需设overflow:hidden、white-space:nowrap及正确transform位移；JS方案应使用requestAnimationFrame并兼顾可访问性。
别用 <marquee> 标签——它在 Chrome、Firefox、Edge 中已不渲染，Safari 直接忽略，控制台会报 Deprecated API usage。真正能上线的滚动效果，必须用 CSS 动画或 JS 实现。
为什么 <marquee> 不能用
这不是“兼容性还行”，而是事实性失效：现代浏览器已移除对其的主动支持。即使页面看似动了，也可能是旧版渲染残留或 polyfill 干预，行为不可控。更严重的是，它无法满足 WCAG 可访问性要求（比如无法暂停、无 motion-reduce 降级），且触发 layout（重排），移动端极易掉帧。
CSS @keyframes 滚动必须设对初始位移
常见错误是文字闪一下才开始动，本质是动画起点没对齐容器右边界。
- 容器必须设
overflow: hidden和white-space: nowrap - 滚动元素（如
<span>）要设display: inline-block或flex，宽度需 ≥ 容器宽度（推荐用width: max-content） - 关键帧必须从
transform: translateX(100%)开始，到translateX(-100%)结束，确保无缝衔接 - 加
animation-timing-function: linear，避免缓动导致速度忽快忽慢 - 长文本建议加
will-change: transform提示 GPU 加速
简短示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
animation: scroll 15s linear infinite;
will-change: transform;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
JS 方案只在需要交互时才值得上
如果你只要自动滚动，JS 是过度设计；但需要点击暂停、鼠标悬停暂停、动态追加内容、变速或反向，就必须用 JS。
- 别用
setInterval+scrollLeft，低帧率下卡顿、不同步、易内存泄漏 - 必须用
requestAnimationFrame驱动位移，配合getBoundingClientRect()或offsetWidth动态计算边界 - 务必监听
prefers-reduced-motion媒体查询，对运动敏感用户禁用动画 - 移动端 iOS Safari 对长文本
transform渲染有 bug，可 fallback 到scrollLeft+overflow-x: auto配合定时轮播
最易被忽略的点：滚动内容语义化。无论用 CSS 还是 JS，都要包裹在 <aside aria-label="最新公告"> 这类带明确 role 和 label 的容器里，并提供显式暂停按钮——不是“加个 hover 就算交互”，而是真能让键盘用户和屏幕阅读器可控。
