标签已被w3c从html5规范中彻底移除，chrome、firefox、safari 17+等现代浏览器无标准行为保障，部分版本直接不渲染；它无语义、不可访问、无法控制，且缺乏js api支持，移动端尤其不可靠；推荐使用css @keyframes + transform: translatex()实现兼容性好、性能优、零js依赖的滚动效果，需配合overflow: hidden、white-space: nowrap、infinite linear动画及内容复制等细节确保无缝循环。
<marquee></marquee> 标签不是“不推荐”，而是被 W3C 从 HTML5 规范中彻底移除——它在 Chrome、Firefox、Safari（17+）里已无标准行为保障，部分版本直接不渲染。
为什么<marquee></marquee>无法继续用
它没有语义、不可访问、无法控制，连基础交互都缺失：
-
behavior、scrolldelay等属性是非标准的，CSS 无法覆盖或继承 - 内容对屏幕阅读器不可见，
aria-hidden="true"也救不了——它打断线性阅读流 - 没有 JS API：拿不到滚动位置、监听不到暂停事件、不能动态追加新条目
- 移动端尤其危险：iOS Safari 16.4+ 已默认禁用，Android Chrome 某些 UA 下会静默失效
CSS @keyframes + transform 是最稳替代
这是当前兼容性最好、零 JS 依赖、性能最优的方案，适用于新闻栏、广告横幅等静态滚动场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须用
transform: translateX()（或translateY()），避免触发布局重排 - 父容器设
overflow: hidden和white-space: nowrap，否则内容会溢出或换行中断动画 - 动画需
infinite+linear；用ease会导致首尾减速，露出空白间隙 - 内容长度影响体验：过短会闪回，过长需拉长
animation-duration（比如 30s 起步），否则卡顿明显 - 无缝循环靠“内容复制”或伪元素补全：
::before或拼接两份文本，让位移终点自然衔接起点
需要交互时，requestAnimationFrame 比 setInterval 可靠得多
鼠标悬停暂停、点击跳转、后端动态更新内容——这些纯 CSS 做不了，但 JS 方案容易踩坑：
- 别用
scrollLeft驱动动画：频繁读写触发强制同步布局，低端机明显掉帧 - 改用
requestAnimationFrame+transform: translateX()，只走 GPU 加速路径 - 每次帧内计算偏移量，到边界后重置为起始值（不是靠 CSS 自动循环），才能精准控制节奏
- 监听
mouseenter/mouseleave即可实现悬停暂停，无需额外状态管理
容易被忽略的细节：响应式与可访问性不是“锦上添花”
很多团队做完滚动效果就上线，结果在 iPad 上文字挤成一团，或视障用户完全感知不到公告内容。真正落地时得盯住三点：
- 移动端要降级：小屏下
animation-duration必须随screen.width动态调整，否则 20s 动画在 375px 宽度上根本看不出动 - 必须加
prefers-reduced-motion媒体查询，对开启“减少动画”的用户直接停掉动画，否则可能引发眩晕 - 滚动区域要加
role="region"和aria-label，比如aria-label="实时新闻滚动栏"，让辅助技术知道这是什么
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
