纯css响应式图片走马灯需用vw单位和translatex(100vw)/translatex(-100%)锚定视口，双份内容无缝拼接，ul内img不可换行空格，父容器overflow:hidden，配合object-fit:cover统一图尺寸，hover暂停须作用于ul本身。
纯 CSS 实现响应式图片走马灯，关键不是“适配屏幕尺寸”，而是让滚动逻辑不依赖固定像素值——否则在手机上图片挤成一排、动画位移错乱、复制内容对不齐，全崩。
用 vw 和 translateX 替代像素位移
硬写 translateX(-1400px) 在不同设备上必然失效：桌面宽屏下位移太短，手机窄屏下又过长。必须用视口单位锚定起始/终点。
- 起点设为
translateX(100vw)（元素右边缘刚进视口） - 终点设为
translateX(-100%)（元素左边缘刚出视口），前提是子容器宽度 ≥ 父容器宽度 × 2 - 动画时长用
animation-duration控制节奏，比如20s适合长图流，8s适合三张小图 - 必须加
animation-timing-function: linear，否则加速减速会暴露断点
图片流必须双份内容拼接，且不能有空格
单靠一个 ul 做 translateX 滚动，永远无法真正无缝——到头就停或回弹。真实做法是复制全部图片节点，拼成两倍长度。
- HTML 结构里，
ul内部的img必须连续排列，中间**不能换行、不能空格**，否则渲染出空白间隙 - 如果用 JS 动态生成，确保
innerHTML是紧凑字符串，别用appendChild后再换行缩进 - 父容器
.marquee要设overflow: hidden，否则复制部分会在滚动初期漏出来 - 若图片宽高不一致，统一用
object-fit: cover+ 固定容器尺寸，避免拉伸错位
响应式断点要重算动画位移距离
仅靠媒体查询改 animation-duration 不够。当屏幕变窄，单张图视觉宽度变小，但原 -100% 仍按自身宽度算，可能滚不够就重头——尤其多图并排时。
- 稳妥做法：用 JS 在
resize时读取ul的scrollWidth，动态设置style.setProperty('--marquee-width', width + 'px') - CSS 中用
@keyframes引用该变量：to { transform: translateX(calc(-1 * var(--marquee-width))); } - 不希望用 JS？那就放弃“绝对精准”，改用
translateX(-200vw)——只要内容足够长，-200vw 总能保证滚完一份再进第二份
hover 暂停必须作用于动画元素本身
常见错误是给外层容器加 :hover ul { animation-play-state: paused; }，结果鼠标移到图片间隙时动画恢复，造成跳帧感。
- 正确写法：把
animation直接写在ul上，并用ul:hover { animation-play-state: paused; } - 如果用了 flex 布局，
ul高度可能坍缩，需加height: 100%或显式设高，否则 hover 区域无效 - 移动端无 hover，可加 JS 监听
touchstart/touchend模拟暂停逻辑
最易被忽略的一点：所有图片必须同尺寸加载完成后再启动动画。异步加载导致高度塌陷、scrollWidth 读错、复制内容错位——要么预设宽高属性，要么等 img.onload 后再启用动画类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
