marquee标签已被w3c彻底移除，chrome90+、firefox80+、edge90+、safari15+均不解析其属性，必须用css@keyframes+transform:translatex()重写；需设overflow:hidden、white-space:nowrap、infinite linear动画，并通过内容复制或js动态计算实现无缝循环。
marquee 标签在现代浏览器中已完全失效，不是“不兼容”，而是被 W3C 彻底移除——Chrome 90+、Firefox 80+、Edge 90+、Safari 15+ 均不解析其任何属性（direction、scrollamount、behavior），写上去也不会滚动，控制台会报 Unknown tag marquee 警告。必须用 CSS 动画重写。
用 @keyframes + translateX() 实现横向滚动
这是最轻量、兼容 IE10+、性能最优的方案，核心是位移而非重排，能启用 GPU 加速。
- 父容器必须设
overflow: hidden，否则内容溢出或撑开布局 - 滚动元素需设
white-space: nowrap和display: inline-block（或flex），否则文字自动换行导致中断 - 动画起点用
transform: translateX(100%)，终点用transform: translateX(-100%)，确保视觉上无缝衔接 -
animation-duration要匹配内容宽度：例如文字总宽约 600px，设12s即保持 50px/s，人眼感知最舒适；低于8s易闪动，高于30s显停滞 - 必须用
animation-timing-function: linear，ease会导致首尾减速、中间突快，破坏匀速感
如何实现真正无缝循环（避免跳帧/空白）
单纯从 100% 移到 -100% 在内容长度变化时极易断裂，尤其动态插入文本（如 WebSocket 公告）。
- 静态文案：HTML 中复制一次内容，如
<span>新闻1 新闻2</span><span>新闻1 新闻2</span>，CSS 中设transform: translateX(-50%)，动画周期对应总宽一半 - 动态内容：不能依赖纯 CSS 自适应，需 JS 获取
getBoundingClientRect().width，重设element.style.animationDuration - 避免用
margin-left: -100%或padding-left: 100%模拟起始位置——这会触发重排，且在缩放或字体加载后错位
鼠标悬停暂停和移动端适配的坑
纯 CSS 无法响应交互，JS 补充时极易踩坑。
- 别直接操作
element.style.animation = ''，这会清空整个动画声明（含时长、方向、循环），应预设两个类：.marquee-running和.marquee-paused，用classList.toggle()切换 - 移动端仅监听
mouseenter不够，必须同时绑定touchstart和touchend，否则 iPad/iPhone 上无响应 - 暂停后恢复时，若直接切回
animation-play-state: running，可能因时间戳错位造成“瞬移”；推荐先用getComputedStyle(el).animationPlayState === 'paused'判断再操作
真正难的不是让文字动起来，而是让动得稳、停得准、换得顺、读得见——尤其是内容长度不可控、设备类型不确定、无障碍要求明确时，marquee 的“简单”反而是最大陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
