用@keyframes+animation实现无缝横向滚动需复制文本内容、设translateX(-50%)、禁用缩放并预加载字体，避免视觉跳变与卡顿。
用 @keyframes + animation 做基础横向滚动
核心是让文字容器在固定宽度内向左位移，位移距离等于自身宽度，再回到起点形成循环。关键不是“滚动”本身，而是让动画结束时视觉无跳变。
常见写法：
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
white-space: nowrap;
animation: scroll-left 20s linear infinite;
}
注意：translateX(100%) 是从右边界开始（文字完全在视口右侧），translateX(-100%) 是移到左边界外（文字完全在左侧外），这样整段文字能完整划过一次。时间值 20s 需按内容长度和容器宽度手动调——太短会快得看不清，太长则停顿感明显。
实现真正无缝：必须复制内容并衔接
上面的动画在循环时会出现 0% → 100% 的瞬间重置，人眼能察觉“闪回”。要无缝，就得让两段相同文字首尾相接，在动画过程中始终有一段完整内容填满可视区。
立即学习“前端免费学习笔记（深入）”；
- HTML 中把文字写两遍：Hello World Hello World
- 容器设
overflow: hidden，只显示中间一段宽度 - 动画终点设为
translateX(-50%)，而非-100%，因为内容已双倍长度 - 确保两段文字之间无空格或换行符，否则会多出间隙
否则即使动画时间拉长，也会在循环点露出空白或重叠。
