HTML5已弃用标签，应使用CSS @keyframes实现平滑循环滚动，关键在于动画时间、位移与容器尺寸匹配，并设animation-iteration-count: infinite；需配合white-space: nowrap、overflow: hidden及linear缓动函数；动态内容需JS计算位移；高阶交互则用requestAnimationFrame精确控制。
HTML5 本身没有 标签，也不支持 loop 属性控制滚动文字——这是过时的非标准标签，现代浏览器已弃用或不兼容。
用 CSS @keyframes 实现平滑循环滚动
真正可靠、可控制、符合标准的做法是用 CSS 动画。关键在于动画时间、位移距离与容器尺寸匹配，且设 animation-iteration-count: infinite。
- 文字需包裹在固定宽高的容器内，设
overflow: hidden - 动画从完整位移（如
translateX(-100%)）到归零，再无缝接续（靠animation-timing-function: linear避免停顿） - 总动画时长越长，滚动越慢；若内容长度动态变化，需 JS 计算位移距离，否则会卡顿或跳帧
.scroll-text {
white-space: nowrap;
overflow: hidden;
width: 300px;
}
.scroll-text span {
display: inline-block;
animation: scroll 8s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
用 requestAnimationFrame + JS 精确控制重播时机
当需要监听滚动结束、手动触发重播、或与用户交互（如 hover 暂停）联动时，CSS 动画不够灵活，必须用 JS。
- 避免用
setInterval或setTimeout，容易因帧率波动导致错位或抖动 - 用
requestAnimationFrame驱动位移，配合getBoundingClientRect()判断元素是否完全移出视口 - 检测到末尾后，立即将元素位置重置为起始点（注意要保持视觉连续，不能闪跳）
- 重置时建议用
transform: translateX(100%)而非left，避免触发重排
为什么
这个标签从未被纳入 HTML5 标准，Chrome/Firefox/Safari 均已移除对其的主动支持。即使部分浏览器还能渲染，也存在严重问题：
立即学习“前端免费学习笔记（深入）”；
- 无法通过 CSS 控制样式（如字体、颜色、间距），只能靠内联
style或过时属性如scrolldelay - 无障碍支持极差：屏幕阅读器通常忽略，且无暂停/控制机制
- 移动端表现不可控，经常被截断、缩放异常或直接不滚动
- SEO 友好性为零，搜索引擎不索引其中内容
滚动文字循环的关键细节常被忽略
最容易出问题的地方不在“怎么动”，而在“怎么连”。比如两个相同文案拼接后循环播放，看似简单，但：
- 若文案含空格或换行符，
white-space设置不对会导致首尾出现空白间隙 - 字体加载延迟（如自定义 Web Font）会让初始动画位移计算错误，需监听
fontload或用document.fonts.ready - 使用
transform: translateX()时，若父容器有transform或perspective，可能触发新的层叠上下文，影响子元素定位 - 移动端 touch 事件干扰滚动，需加
touch-action: none防止误触发页面拖拽
