标签在 html5 中已被废弃，因非语义化、无无障碍支持、浏览器行为不一致；推荐用 css @keyframes + transform: translatex() 实现可访问、可暂停的滚动效果，交互复杂时再用 javascript 驱动。
marquee 标签在现代 HTML5 中已被废弃，不应再使用。 它从未被纳入 HTML5 规范，所有主流浏览器虽仍支持（出于兼容性），但行为不一致、无法访问、SEO 不友好，且无法用 CSS 或 JS 精确控制。
为什么 <marquee></marquee> 不能算 HTML5 方案
HTML5 明确移除了 <marquee></marquee> —— 它不是语义化元素，没有无障碍支持（屏幕阅读器会跳过或读错），且 behavior、direction 等属性在不同浏览器中表现差异大（比如 Safari 可能完全忽略 scrolldelay）。W3C 和 WHATWG 文档中均无该标签定义。
CSS @keyframes + animation 实现平滑滚动文字
这是当前最推荐的替代方案：语义清晰、可访问、可暂停、支持响应式。关键在于用 transform: translateX() 配合无限动画循环：
<div class="marquee">
<span class="marquee-content">欢迎来到技术分享频道｜更新中｜欢迎订阅｜</span>
</div>
<style>
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
- 动画时长（如
20s）需根据内容长度和容器宽度调整，太短会卡顿，太长则滚动迟缓 - 若想无缝循环，
.marquee-content内容建议重复两次（如文本｜文本｜），否则结尾到开头会有空白闪动 - 用
prefers-reduced-motion媒体查询可自动禁用动画：@media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; } }
用 JavaScript 控制滚动节奏与交互
当需要暂停/播放、响应鼠标悬停、或动态更新文字时，CSS 动画就力不从心了，此时应改用 requestAnimationFrame 或 setInterval 手动驱动位移：
立即学习“前端免费学习笔记（深入）”；
<div id="js-marquee" class="marquee-js">实时数据流：温度23℃｜湿度45%｜风速1.2m/s｜</div>
<script>
const el = document.getElementById('js-marquee');
let pos = el.clientWidth;
el.style.transform = `translateX(${pos}px)`;
function animate() {
pos -= 0.5; // 滚动速度
if (pos < -el.scrollWidth) pos = el.clientWidth;
el.style.transform = `translateX(${pos}px)`;
requestAnimationFrame(animate);
}
animate();
</script>
- 手动控制避免了 CSS 动画重绘开销，适合高频更新场景（如监控字幕）
- 监听
mouseenter/mouseleave即可实现悬停暂停：el.addEventListener('mouseenter', () => cancelAnimationFrame(rafId)) - 注意：直接操作
style.transform会覆盖 CSS 动画，二者不可混用
真正麻烦的不是“怎么让字动起来”，而是让动得自然、可控、可访问、可维护。用 @keyframes 起手，遇到交互需求再切到 JS 驱动——别为了省几行代码，把页面变成未来维护的雷区。
