<marquee>在现代浏览器中失效，因HTML5不支持、广告插件主动删除、Chrome120+/Firefox125+默认禁用渲染；应改用CSS @keyframes + transform: translateX()实现滚动，并注意命名、时长、性能及容器样式等细节。
为什么 <marquee> 在现代浏览器里根本不动
因为 <marquee> 从一开始就是非标准标签，HTML5 完全不承认它。主流广告拦截插件（如 uBlock Origin、AdGuard）会直接匹配并移除所有含 marquee 标签名或 behavior="scroll" 等特征的 DOM 节点——不是“可能屏蔽”，是启动时就删掉，连 JS 检测都来不及。
更麻烦的是，Chrome 120+ 和 Firefox 125+ 已默认禁用其渲染逻辑，即使没装插件，<marquee> 也只会显示为静态块级元素。
CSS 动画替代方案：用 @keyframes + transform: translateX()
这是目前最可靠、兼容性最好、且几乎不会被误判为广告的滚动实现方式。关键点在于避开“滚动”语义词和自动播放特征：
- 不用
animation-name: scroll这类敏感名，改用slide-text或loop-x - 避免在 CSS 中写
marquee、ad、banner等字段（部分插件会扫描 CSS 文本） - 动画时长设为 ≥3s，过快（如
0.5s）易被判定为轮播广告 - 推荐用
transform: translateX()而非left，性能更好，也更难被规则匹配
示例片段：
立即学习“前端免费学习笔记（深入）”；
@keyframes slide-text {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
white-space: nowrap;
animation: slide-text 8s linear infinite;
}
JS 控制滚动时，绕过广告插件的三个硬规则
广告拦截插件对 JS 行为的检测比对 HTML 更严格。以下操作能显著降低触发率：
- 不要用
setInterval驱动位移，改用requestAnimationFrame+ 时间戳计算偏移量 - 避免在初始化时立即启动滚动；加个
setTimeout(() => start(), 300)延迟启动 - 监听
visibilitychange，页面隐藏时暂停动画（很多插件只拦截“活跃广告”，静默状态不干预） - DOM 插入后不要立刻调用
scrollIntoView或修改scrollTop，这属于高危行为
真正被忽略的细节：父容器的 overflow 和字体渲染
即使动画代码完全合规，滚动文字仍可能卡顿、跳帧或被截断，根源常在容器样式：
-
overflow: hidden必须加在直接父容器上，不能靠祖先元素“兜底”——插件有时会剥离外层 wrapper 导致失效 - 使用
font-smoothing: antialiased或-webkit-font-smoothing: subpixel-antialiased可减少某些 macOS Safari 下的渲染抖动 - 若文字含中文，确保
line-height≥1.4，否则部分 AdGuard 规则会因“行高异常”误判为恶意 banner
滚动本身不难，难的是让浏览器和插件都“视而不见”。多数失败案例，问题不出在动画逻辑，而出在容器边界、字体度量或启动时机这些边缘位置。
