HTML怎么实现文字滚动_HTML marquee替代方案教程【动画】-html教程-PHP中文网

marquee 标签因非标准、无无障碍支持、无法交互且被 W3C 废弃而禁用；推荐用 CSS @keyframes + transform: translateX() 实现可控滚动，注意 overflow: hidden、timing-function、iteration-count 及 JS 交互优化。

html怎么实现文字滚动_html marquee替代方案教程【动画】

marquee 标签为什么不能用了

是个早已被废弃的非标准标签，现代浏览器虽大多还能渲染，但不保证行为一致，且完全不支持 CSS 动画控制、无障碍访问（如屏幕阅读器会跳过或误读），更无法响应用户交互（比如 hover 暂停）。W3C 从 HTML5 开始就明确不收录它，所有新项目都该直接绕开。

CSS animation 实现滚动文字最稳方案

用 @keyframes + animation 是当前最通用、可控性最强的方式。核心思路是让文字容器在固定宽度内，通过 transform: translateX() 持续位移，再用 white-space: nowrap 防止换行。

常见错误现象：animation 卡顿、文字闪回、滚动不连贯

必须给父容器设 overflow: hidden，否则滚动内容会溢出显示
动画时长（animation-duration）要和文字总宽度匹配，太短会飞快闪过去，太长则像静止；建议用 calc(1s * var(--length)) 动态计算
用 animation-timing-function: linear，避免默认的 ease 导致加速减速破坏匀速感
若文字需无限循环，animation-iteration-count: infinite 不可少，且关键帧终点值必须等于起点（比如 translateX(-100%) 要对应容器宽度）

示例片段：

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