如何在HTML中利用 marquee 标签实现滚动字幕效果（已废弃参考）-html教程-PHP中文网

标签已被 html5 废弃，chrome 120+ 和 firefox 125+ 直接渲染为静态文本；应使用 css @keyframes 或 javascript requestanimationframe 实现可控滚动，兼顾可访问性、响应式与平滑性。

如何在html中利用 marquee 标签实现滚动字幕效果（已废弃参考）

<marquee></marquee> 标签在现代浏览器中已完全废弃，不被 HTML5 标准支持，且多数浏览器（包括 Chrome、Firefox、Edge 最新版）已移除对其的渲染逻辑——直接使用会失效或触发控制台警告 marquee is deprecated。

为什么 `<marquee></marquee>` 不能用了

它从设计上就缺乏可访问性（无法键盘导航、屏幕阅读器难识别）、响应式支持差、CSS 控制力弱，且行为在不同浏览器中不一致。W3C 明确将其标记为“obsolete”，不是“deprecated”而是“removed”。

实际现象：页面中写 <marquee>欢迎光临</marquee>，Chrome 120+ 和 Firefox 125+ 直接显示为普通静态文本，无滚动；部分旧版 Safari 可能残留渲染，但不可靠。

用 CSS `@keyframes` 替代 `<marquee></marquee>` 的最小可行方案

核心思路：用 overflow: hidden 截断容器，再通过 transform: translateX() 动画驱动子元素水平位移。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

必须设置父容器 white-space: nowrap 防止文字换行
动画 from 位置设为 translateX(100%)（文字从右边缘开始），to 设为 translateX(-100%)（滚出左边缘）
动画时长需根据文字长度动态调整，否则太快看不清、太慢显卡顿；粗略公式：duration = 文字字符数 × 0.5s

<div class="marquee">
  <span>欢迎光临 · 今日特惠 · 满299减50 · 限时三天</span>
</div>

<style>
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
</style>

用 JavaScript 实现可控滚动（解决循环间隙、暂停交互等需求）

CSS 方案在文字长度变化或需要鼠标悬停暂停时捉襟见肘，JS 方案更灵活但需注意重排开销。

避免用 setInterval 修改 left 值——触发频繁 layout，推荐用 requestAnimationFrame
循环滚动的关键是：当元素左偏移量 ≤ -元素宽度时，立刻重置为 offsetWidth，视觉上无缝
暂停/恢复需保存当前 animationId 并控制帧循环，而非仅改 CSS animation-play-state（该属性对 JS 驱动动画无效）

简单示例（无依赖）：

<div id="js-marquee"><span>滚动内容</span></div>

<script>
const el = document.getElementById('js-marquee');
const span = el.querySelector('span');
let pos = el.offsetWidth;
let animId = null;

function animate() {
  pos -= 0.5;
  if (pos <= -span.offsetWidth) pos = el.offsetWidth;
  span.style.transform = `translateX(${pos}px)`;
  animId = requestAnimationFrame(animate);
}
animId = requestAnimationFrame(animate);

// 暂停：cancelAnimationFrame(animId)
// 恢复：animId = requestAnimationFrame(animate)
</script>

真正麻烦的不是怎么让它动起来，而是怎么让它动得稳、停得准、适配不同字号和屏幕宽度——这些细节在 CSS 动画里靠调参硬凑，在 JS 里得自己算宽高、监听 resize、处理字体加载延迟。别低估这点。