marquee走马灯为什么废弃_HTML动态效果CSS替代化-html教程-PHP中文网

marquee标签已被w3c从html5规范中彻底移除，chrome、firefox、safari等主流浏览器已弃用或完全不渲染，因其无语义、不可访问、无法交互且不支持css控制；推荐用css @keyframes + transform: translatex()实现高性能滚动，配合overflow: hidden、white-space: nowrap及无缝内容拼接，并通过animation-play-state实现暂停等交互。

marquee走马灯为什么废弃_html动态效果css替代化

marquee 标签已被所有主流浏览器弃用，不是“不推荐”，而是根本不会被规范支持——它没有语义、无法访问、不能暂停/控制、不响应用户交互，且会干扰屏幕阅读器的线性阅读流。

`marquee` 为什么在现代页面里必须替换

它是 HTML 3.2 时代的遗留标签，W3C 从未将其纳入 HTML5 规范
Chrome、Firefox、Safari 已明确标记为“deprecated”，部分版本（如 Safari 17+）已完全移除渲染逻辑
marquee 内容无法被键盘焦点访问，aria-hidden="true" 也无法修复其可访问性缺陷
没有 API 控制：不能用 JS 获取滚动位置、不能监听暂停事件、不能动态追加内容
所有样式（如速度、方向）都靠非标准属性（behavior、scrolldelay），CSS 无法覆盖或继承

用 CSS `@keyframes` + `transform` 实现等效跑马灯

适合静态文本/图标循环、新闻条、广告横幅等轻量场景，性能好、无 JS 依赖：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

必须用 transform: translateX()（或 translateY()），避免触发布局重排
动画需设置 infinite 和 linear，否则会出现卡顿或跳帧
父容器设 overflow: hidden，子元素宽度要足够容纳完整滚动内容（常需复制一份内容拼接）

示例结构：

<div class="marquee">
<span class="marquee-content">前端日报 · Vue 3.5 发布｜CSS @layer 支持落地｜WebGPU 进入 Stable</span>
<span class="marquee-content">前端日报 · Vue 3.5 发布｜CSS @layer 支持落地｜WebGPU 进入 Stable</span>
</div>

对应 CSS：

.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}

用 JavaScript 控制滚动节奏和交互行为

当需要暂停/播放、鼠标悬停暂停、动态加载新条目、或与滚动容器联动时，纯 CSS 不够用：

不要用 scrollLeft 做连续动画（触发频繁重排，卡顿明显），改用 requestAnimationFrame + transform
暂停逻辑建议用 animation-play-state: paused 切换，而非清除/重设动画
鼠标移入时加 class：.marquee:hover .marquee-content { animation-play-state: paused; }
动态追加内容后，需重置动画：先移除 class 触发 reflow，再加回，或用 animation: none 瞬间重置后恢复
注意：若内容高度不固定，transform 滚动可能造成文字模糊（尤其是小字号），可加 will-change: transform 提前升层，但别滥用

容易被忽略的三个细节

marquee 默认是“无缝循环”，CSS 动画要模拟这点，必须让内容长度 ≥ 容器宽度 × 2，否则会出现空白断点
屏幕阅读器仍会读出滚动中的文字，但顺序混乱；应在 .marquee 上加 aria-live="off" 并提供静态摘要区域
移动端 touch 操作无法自然拖拽滚动，如需此能力，得上 touchstart/touchmove + 手势位移计算，marquee 原生也不支持