编辑网页时使用HTML实现流畅的文字滚动效果-html教程-PHP中文网

标签已失效，必须用css动画或js实现滚动效果；css需设overflow:hidden、white-space:nowrap及正确transform位移；js方案应使用requestanimationframe并兼顾可访问性。

编辑网页时使用html实现流畅的文字滚动效果

别用 <marquee></marquee> 标签——它在 Chrome、Firefox、Edge 中已不渲染，Safari 直接忽略，控制台会报 Deprecated API usage。真正能上线的滚动效果，必须用 CSS 动画或 JS 实现。

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

这不是“兼容性还行”，而是事实性失效：现代浏览器已移除对其的主动支持。即使页面看似动了，也可能是旧版渲染残留或 polyfill 干预，行为不可控。更严重的是，它无法满足 WCAG 可访问性要求（比如无法暂停、无 motion-reduce 降级），且触发 layout（重排），移动端极易掉帧。

CSS `@keyframes` 滚动必须设对初始位移

常见错误是文字闪一下才开始动，本质是动画起点没对齐容器右边界。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

容器必须设 overflow: hidden 和 white-space: nowrap
滚动元素（如 <span></span>）要设 display: inline-block 或 flex，宽度需 ≥ 容器宽度（推荐用 width: max-content）
关键帧必须从 transform: translateX(100%) 开始，到 translateX(-100%) 结束，确保无缝衔接
加 animation-timing-function: linear，避免缓动导致速度忽快忽慢
长文本建议加 will-change: transform 提示 GPU 加速

简短示例：

.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  animation: scroll 15s linear infinite;
  will-change: transform;
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

JS 方案只在需要交互时才值得上

如果你只要自动滚动，JS 是过度设计；但需要点击暂停、鼠标悬停暂停、动态追加内容、变速或反向，就必须用 JS。

别用 setInterval + scrollLeft，低帧率下卡顿、不同步、易内存泄漏
必须用 requestAnimationFrame 驱动位移，配合 getBoundingClientRect() 或 offsetWidth 动态计算边界
务必监听 prefers-reduced-motion 媒体查询，对运动敏感用户禁用动画
移动端 iOS Safari 对长文本 transform 渲染有 bug，可 fallback 到 scrollLeft + overflow-x: auto 配合定时轮播