纯css图片跑马灯需用flex布局+translatex动画，图片等宽并复制一倍实现无缝循环，设white-space:nowrap和overflow:hidden，动画终点为-translatex(50%)，推荐固定图片宽度防变形。
用 HTML + CSS 实现纯静态图片跑马灯，不依赖 JS
纯 CSS 跑马灯能避免 JS 加载失败或阻塞渲染的问题，适合展示型页面。关键在于用 @keyframes 控制位移，并让图片容器形成无缝循环视觉效果。
- 所有图片必须等宽，且容器宽度固定（比如
width: 100%），否则位移会错位 - 动画时长需根据图片数量调整：4 张图建议设
animation-duration: 12s（每张停留 3s） - 必须设置
white-space: nowrap防止图片换行，overflow: hidden裁剪溢出部分 - 为实现“无缝”，需把图片序列复制一份拼在末尾（如
<img><img><img><img><img><img><img><img>），动画走完第一组后刚好接上第二组开头
flex 布局 + translateX 是最稳的位移方式
用 display: flex 替代 inline-block 可避免空格/换行符带来的额外间隙；用 transform: translateX() 动画比 left 更高效且不触发重排。
- 父容器设
display: flex和overflow: hidden - 图片统一设
flex: 0 0 auto（不伸缩、不缩小、按内容宽） - 动画关键帧从
translateX(0)到translateX(-50%)，刚好移动一组图片宽度 - 注意：若图片总宽为
W，则动画终点应为-W/2（因复制了一组，实际滚动距离只需一半）
图片尺寸和响应式处理容易崩
跑马灯一加 max-width: 100% 就容易拉伸变形或错位，必须锁定宽高比或显式设定尺寸。
- 推荐给每张
<img>设固定width（如width: 200px）+height: auto，避免比例失真 - 如需响应式，改用
vw单位（如width: 25vw），并配合媒体查询在小屏下调小数值 - 不要对容器设
height，否则可能裁掉图片顶部/底部；靠图片自身高度撑开容器更可靠 - 加载慢的图片会导致初始空白，可加
loading="lazy"，但首屏建议去掉该属性
IE 和旧版 Safari 不支持 translateX 动画？换用 margin-left
如果项目仍需兼容 IE11 或 Safari ≤ 12，transform 动画可能失效，此时退回用 margin-left，但要注意性能略差且易抖动。
- 将动画目标从
transform: translateX()改为margin-left: -Xpx - 必须显式写出像素值（不能用百分比），所以得提前算好总宽度：
totalWidth = imgCount × imgWidth - 动画终点设为
margin-left: -totalWidth / 2，起点为0 - 加
will-change: margin-left可缓解卡顿，但别滥用，只加在动画元素上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
