marquee标签已彻底失效，chrome120+、firefox80+、safari17+中不滚动且控制台报错；首选替代方案是css@keyframes+translatex，需父容器overflow:hidden、内容white-space:nowrap、动画元素display:inline-block，起点translatex(100%)终点translatex(-100%)，内容复制实现无缝循环，悬停暂停须作用于动画元素本身。
marquee 标签已彻底失效，别再用它写结构
直接写 <marquee></marquee> 在 Chrome 120+、Firefox 80+、Safari 17+ 中不会滚动，控制台报 marquee is deprecated，部分版本（如 Safari 17+）已完全不渲染。这不是兼容性问题，是标准移除——HTML5 规范里根本没有它。
CSS @keyframes + translateX 的最小可用结构
这是目前最轻量、无 JS 依赖、语义清晰的替代方案。核心不是“套个 class”，而是结构和样式必须协同生效：
- 父容器必须设
overflow: hidden，否则内容溢出或撑开布局 - 滚动内容需为单行流，强制加
white-space: nowrap - 动画元素必须是
display: inline-block或flex子项，不能是纯文本节点 -
@keyframes起点用transform: translateX(100%)，终点用transform: translateX(-100%)，避免首尾跳帧
示例结构：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<div class="marquee"> <span class="marquee-content">前端日报 · Vue 3.5 发布 | CSS @layer 支持落地 | WebGPU 进入 Stable</span> </div>
为什么复制内容拼接比 padding-left 更稳
很多教程推荐 padding-left: 100% 让文字初始右移，但实际中容易因字体渲染差异、缩放、深色模式导致闪动或错位。真正可靠的无缝方案是内容复制：
- 把原文本重复一次：
"内容 | 内容"，视觉上形成无限循环流 - 动画从
translateX(0)到translateX(-50%)，刚好滚动完第一个副本 - 这样即使动画重置或时长微调，也不会出现空白断层
- JS 动态更新时，也只需替换两份内容，无需重新计算偏移
鼠标悬停暂停必须作用于动画元素本身
常见错误是只给父容器写 .marquee:hover { animation-play-state: paused; }，但动画在 .marquee-content 上，所以无效。
- 正确写法：
.marquee:hover .marquee-content { animation-play-state: paused; } - 移动端没有
:hover，如需点击暂停，必须用 JS 切换 class，例如绑定touchstart和click - 若页面有多个跑马灯，
@keyframes名称不能重复，否则动画会相互覆盖
真正难的不是让字动起来，而是当容器宽度响应式变化、文字长度动态更新、或用户开启了 prefers-reduced-motion 时，硬编码的 100% 和固定秒数会立刻失效。这时候得靠 JS 读取 offsetWidth 重算时长，或用 calc() 配合 CSS 变量驱动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
