纯CSS水平无缝滚动需用flex+translateX，位移值必须等于图片总像素宽（如三张200px图写translateX(-600px)），禁用百分比、overflow:visible、flex-shrink及gap，图片复制一份追加实现循环。
用 flex + translateX 实现水平无缝滚动最稳
纯 CSS 就能搞定，不用 JS，也不依赖插件。关键不是“怎么动”，而是“位移值必须等于原始图片总宽度（像素）”。比如三张 200px 宽的图，动画终点就得写 translateX(-600px)，不能写 -100%——百分比在缩放、小数像素截断时会错位，0.5px 的误差循环起来就是明显空白。
常见错误现象：overflow: visible 导致边缘露白；图片没设 flex-shrink: 0 被压缩；gap 或换行空白让总宽变大；用了 ease 缓动导致起停顿挫。
- 外层容器加
overflow: hidden - 每张
img设固定宽高 +flex-shrink: 0（如width: 200px; height: 120px;） -
.scroll-track用display: flex，不加gap，不包li，直接放img - 动画用
linear，别用ease；终点位移值 = 图片数量 × 单图像素宽（含 padding/margin） - HTML 中把图片列表复制一份追加到末尾（
A-B-C → A-B-C-A-B-C）
上下滚动必须用 translateY，结构要竖排
水平滚动靠 flex 横向排列，上下滚动就得让图片竖着排——不是靠 flex-direction: column，而是靠固定容器高度 + 每张图设为 height: 100% 并禁用缩放，再用 translateY 垂直位移。
如果图片尺寸不一致，统一用 object-fit: cover + 固定容器高宽，避免拉伸变形；否则滚动时会出现高度跳变。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 外层容器设固定高度（如
height: 300px），overflow: hidden - 每张
img设height: 300px（或等同于容器高），flex-shrink: 0 - 动画终点：假设三张图，就写
translateY(-900px)，不是-100% - 复制整组图片追加，结构仍是
A-B-C-A-B-C，只是现在是竖着叠的 - 调试时临时取消
overflow: hidden，看轨道是否完整铺满、有无垂直间隙
响应式下像素位移会失效，得换方案
一旦加了 vw 或媒体查询，translateY(-900px) 就不适用了——屏幕变小，图宽高缩了，但位移值还是 900px，接缝立刻暴露。
这时候只能放弃“双份内容+像素位移”，改用单图背景平铺方案：background-image + background-position 动画。它天然响应式，缩放不撕裂，但只适用于一张图重复滚动（比如 banner 条纹、产品 icon 流水线）。
- 不用
img标签，改用容器背景：background-image: url("strip.png"); background-repeat: repeat-y; - 动画终点位移必须严格等于原图像素高度（如图高
120px，就写background-position: 0 -120px） - 不支持多图切换，只适合真正意义上的“纹理式”垂直滚动
- 若必须多图响应式，就只能上 JS：监听
resize，动态重算总高度并更新keyframes，但性能开销明显
鼠标悬停暂停和反向滚动只需一行 CSS
用户想看清某张图时突然暂停，是基本交互需求；反向滚动则用于节奏变化。两者都不需要 JS，纯 CSS 就够。
容易踩的坑：把 :hover 加在 img 上而不是容器上，结果一移过去就暂停，一移开又狂滚；或者反向动画没重命名 @keyframes，导致类名切换无效。
- 暂停：给外层容器加
.slider-container:hover { animation-play-state: paused; } - 反向：定义新动画
@keyframes scrollYRev { 0% { transform: translateY(0); } 100% { transform: translateY(900px); } }，再用 JS 切换animation-name类名 - 慎用
transition混入动画，会干扰animation的播放状态
img 显式声明 height，或用 aspect-ratio 预留空间——这点最容易被忽略，但一出问题就全盘失效。 
