纯CSS轮播仅适用于自动滚动、无交互、内容固定的场景；需HTML双份内容拼接、transform: translateX(-100%)、固定容器宽、overflow:hidden及精确尺寸对齐，否则会出现跳变或闪屏。
纯 CSS + HTML 能做真正无缝的轮播图，但只适用于**自动滚动、无交互、内容固定**的场景（比如顶部通知栏、品牌 logo 墙、广告语跑马灯）。一旦需要点击切换、悬停暂停、响应式缩放或用户拖拽，就必须引入 JS——CSS 本身没有事件响应能力，也做不到逻辑重置。
为什么 left 动画会跳变？
常见错误是用 left: -100% 配合 width: 200%。问题在于：left: -100% 的百分比基准是父容器宽度，不是内容总宽；而轮播要“无缝”，位移距离必须严格等于内容自身宽度。结果就是动画还没走完，内容就提前露白或重叠。
-
transform: translateX(-100%)的100%才是指当前元素自身宽度，精准对齐 - 必须把内容复制一份拼在后面（不是 JS 克隆，是 HTML 里写两遍），否则滚动到末尾时没内容接上，必然闪一下
-
overflow: hidden必须加在父容器上，且父容器宽度要固定（不能是100%或fit-content）
@keyframes 动画必须用 transform + 百分比
直接写 translateX(-3060px) 看似精确，但一旦内容项数或间距变化，就得手动改数字；用 -100% 更健壮，前提是 .marquee-inner 的 width 设对了。
- 单个
.marquee-item宽580px，gap: 40px（4 个间隙），总宽 =580px * 5 + 40px * 4 = 3060px - 双份内容拼接，
.marquee-inner宽应设为calc(580px * 5 + 40px * 4 * 2)或更稳妥的calc((580px + 40px) * 5)（即每项含右侧 gap，5 项共620px * 5 = 3100px） - 动画终点写
transform: translateX(-100%)，起点translateX(0)，浏览器自动按元素自身宽计算
HTML 结构必须显式重复内容
CSS 不会帮你复制 DOM，你得在 HTML 里把要滚动的内容写两遍。这不是冗余，是实现“视觉连续”的必要条件。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="marquee-inner"><span>A</span><span>B</span></div>→ 滚到底就停了 - 正确写法：
<div class="marquee-inner"><span>A</span><span>B</span><span>A</span><span>B</span></div>→ 第二组 B 滚入时，第一组 A 刚好完全移出，眼睛看不出断点 - 如果用
flex布局，记得给每个子项加flex: 0 0 auto和显式width，避免 flex 自动收缩干扰像素对齐
最容易被忽略的是：图片或文字块的宽度、间隙、容器宽度三者必须严格整除对齐。哪怕差 0.5px，循环时就会出现 1px 错位或拉伸——这不是 bug，是 sub-pixel 渲染导致的像素对齐问题，只能靠精确计算和固定尺寸规避。
