用css @keyframes + animation 实现无缝跑马灯，核心是flex布局配合translatex位移，overflow: hidden裁剪，终点位移=单图宽×图数；需复制图片防空白、加touch-action: none防滑动冲突。
直接用 CSS @keyframes + animation 实现最轻量、最可控的跑马灯轮播图，不需要 JS 就能循环滚动，但要注意 overflow 和 transform 的组合陷阱。
用 flex + @keyframes 实现无缝横向滚动
跑马灯本质是元素无限平移，关键不是“切换”，而是“视觉连续位移”。用 display: flex 把所有图片并排放在一行，再用 transform: translateX() 拉动整行容器：
- 必须给父容器设
overflow: hidden，否则滚动过程会看到溢出内容 - 动画终点
translateX值要等于「单张图宽度 × 图片数量」，才能回到起点位置实现无缝 - 若图片宽高不一致，先统一用
flex-shrink: 0防止被压缩，再用width或min-width固定尺寸
.marquee {
display: flex;
overflow: hidden;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-500px); } /* 假设 5 张图 × 100px 宽 */
}
为什么不用 setInterval 切换 class？
手动 JS 控制 class 切换（比如加 active）做“轮播”，根本不是跑马灯——那是卡顿的幻灯片。跑马灯要求：
- 无停顿：CSS 动画可保证帧率稳定，JS 定时器受主线程阻塞影响容易掉帧
- 无跳变：
translateX是合成层属性，GPU 加速，而left或margin-left触发重排，滚动会卡 - 无法真正“无缝”：JS 循环到末尾时总有一帧空白或闪回，CSS 动画靠位移终点对齐天然规避这点
图片数量少时怎么避免“空跑”？
只有 2–3 张图时，单纯平移会出现长空白间隔。解决方法是复制一份图片节点，让 DOM 中实际有双倍数量：
- HTML 里写两遍
<img>，或用 JS 克隆document.querySelectorAll('img')后 append - 动画距离按「原始图数 × 单图宽」计算，但 DOM 总宽是两倍，视觉上就填满了
- 注意：不要用
visibility: hidden或opacity: 0隐藏冗余图，它们仍占布局空间，会影响 translateX 计算
移动端滑动冲突和性能提醒
在 iOS Safari 或安卓 Chrome 上，跑马灯区域可能被误判为可滚动区域，导致手指滑动时页面卡住或触发橡皮筋效果：
- 加
touch-action: none到轮播容器，禁止原生手势干预 - 如果页面本身需要纵向滚动，确保跑马灯容器高度固定，避免因内容重排导致滚动锚点偏移
- 动画时间别设太短（
），低端机上高频率 transform 可能掉帧，反而显得“抖”
真正难的不是写出来，而是调准那几个像素值和时间参数——尤其是多图宽高不一致时，flex 容器的实际总宽度得用 getBoundingClientRect() 实测，不能只靠 CSS 估算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
