左右无缝滚动指图片队列滚动到末尾时视觉上立即接上前段内容，无空白或卡顿；需用css动画+元素复制+精确宽度控制实现，marquee因废弃且无法真正无缝而不可用。
什么是左右无缝滚动，为什么不能直接用 marquee
浏览器早已废弃 marquee 标签，且它无法真正“无缝”——滚动到头会停顿或跳变。真正的无缝，是指图片队列滚动到末尾时，视觉上立刻接上前段内容，没有空白或卡顿。这必须靠 CSS 动画 + 元素复制 + 精确宽度控制来实现。
overflow: hidden 和双份图片是硬性前提
容器必须设 overflow: hidden，否则滚动时会看到溢出部分；图片序列需至少重复一次（比如 4 张图就放 8 张），才能在动画结束前把第二组拉到可视区起点。否则动画一循环就会露白。
- 图片总宽度 = 单张宽 × 图片数量 × 2（复制一份）
- 动画
transform: translateX()的终点值 = -单张宽 × 原图数量（即滚动一个完整周期） - 动画时长要匹配总宽度和速度，例如总宽 4000px、想每秒滚 100px，就得设
duration: 40s
CSS 动画关键参数：用 linear + infinite + 精确位移
贝塞尔曲线或 ease 会让速度不均，破坏无缝感；必须用 linear 保证匀速。同时，animation-iteration-count: infinite 不可少，但更要确保位移终点刚好等于负的“原始图组总宽”，否则循环点会错位。
@keyframes scrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-2000px); } /* 假设原始4张图每张500px */
}
注意：2000px 是原始图组宽度，不是复制后总宽（4000px）。动画只走一个周期距离，靠复制内容撑出连续感。
实际写法：HTML 结构 + 容器尺寸 + 动画绑定
别用 img 标签单个罗列——容易因加载延迟或尺寸未定导致跳动。推荐用背景图或统一设 width/height 的 img，并用 flex 或 inline-block 排布。
- 容器设
white-space: nowrap防止换行 - 每个
img设display: inline-block; vertical-align: top - 动画绑定在内部包裹元素（如
<div class="scroller">），而非容器本身<li>务必测试不同屏幕宽度下是否仍无缝——响应式场景中，建议用 <code>vw或 JS 动态重算位移值
滚动方向反向？把 translateX() 换成 translateX(100%) 起始、translateX(0) 结束，并改动画名为 scrollRight 即可。
最易被忽略的是图片加载时机：没设固定宽高的 img 在加载完成前占位为 0，会导致动画启动后突然撑开、位移错乱。要么预设尺寸，要么等 load 事件再启自动画。
