应避免使用废弃的标签，推荐用css @keyframes实现兼容性好、可维护性强的跑马灯；动态场景可用requestanimationframe优化的js方案；移动端需降级并兼顾无障碍。
用 <marquee></marquee> 标签最简单，但不推荐
直接写 <marquee>欢迎光临</marquee> 确实能动，但它是 HTML5 废弃标签，Chrome、Firefox 等现代浏览器虽暂未移除，但已不保证行为一致——比如在 iOS Safari 中可能完全不滚动，或默认禁用。W3C 明确标记为“非标准”，连 VS Code 都会标黄警告。
如果你只是临时调试、内网页面或兼容老系统，它能快速出效果；但只要涉及用户可见的正式页面，就该换方案。
用 CSS @keyframes + animation 实现可控跑马灯
这是当前最通用、可维护性最强的方式，兼容 Chrome 43+、Firefox 16+、Safari 9+、Edge 12+。核心思路是让文字容器水平位移，超出父容器后重置位置形成循环。
关键点：
- 父容器设
overflow: hidden，否则动画过程会溢出显示 - 动画时长要和文字宽度、移动距离匹配，否则出现卡顿或空白间隙
- 用
infinite循环 +linear动画函数，避免加速/减速带来的节奏感断裂
<div class="marquee">
<span class="marquee-text">新品上市｜限时优惠｜全场包邮｜品质保障｜</span>
</div>
<style>
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee-text {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
用 JavaScript 控制更灵活，但要注意重绘性能
当需要动态增删文字、暂停/恢复、响应鼠标悬停，或文字内容长度变化频繁时，CSS 方案会受限（比如无法自动适配新文本宽度）。这时用 JS 更合适，但别用 setInterval 频繁修改 left 值——它触发重排，容易掉帧。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
推荐用 requestAnimationFrame + transform：
- 只改
transform: translateX()，走 GPU 加速，流畅不卡 - 每次动画帧里计算当前位置，到边界后重置为起始位置（不是靠 CSS 自动循环）
- 监听
mouseenter/mouseleave可轻松实现悬停暂停
示例片段（精简版）：
const el = document.querySelector('.js-marquee');
let pos = 100;
function animate() {
pos -= 0.5;
if (pos
<h3>移动端适配和可访问性常被忽略</h3>
<p>跑马灯在手机上容易误触、阅读困难，WCAG（无障碍指南）明确建议避免自动滚动文本——屏幕阅读器无法同步播报，视障用户可能完全错过内容。</p>
<p>如果必须支持移动端，至少做到：</p>
- 用
@media (hover: none)检测触屏设备，自动降级为静态文本或点击展开 - 给容器加
aria-live="off"，防止读屏器反复读同一段话 - 确保文字大小不小于 14px，背景对比度 ≥ 4.5:1，否则滑过时根本看不清
真正难的不是让它动起来，而是判断「该不该动」——用户注意力是有限资源，自动滚动本质是抢夺控制权。上线前最好关掉动画，问问同事：这段信息，值得让用户分心吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
