零基础应直接用css @keyframes + transform 实现真无缝滚动：图片双份排列，translatex(-50%) 平移，配合 animation-play-state 控制暂停，html结构严格、图片尺寸统一，移动端补三行触摸事件js。
零基础不用学“走马灯”概念，直接抄能跑的代码就行；但照搬网上那些 marquee 或用 JS 拼接一堆 div 的方案，90% 会卡顿、跳帧、鼠标悬停不暂停——根本不是“无缝”，只是看起来动了。
为什么 marquee 标签不能用
浏览器早就废弃它了：marquee 不支持 CSS 过渡、无法控制速度、不响应鼠标事件，Chrome/Firefox/Safari 都只保留兼容性渲染，连 pause 属性都不生效。你看到的“动起来”，其实是靠浏览器硬扛，滚动到头时明显一卡，更别说“无缝”。
- 它不触发
transform硬件加速，纯靠重绘，图片多点就掉帧 - 没有
mouseenter/mouseleave控制逻辑，用户想暂停？做不到 - 宽度/高度必须写死，响应式布局里一缩放就错位
用 CSS @keyframes + transform 实现真无缝
核心思路：把图片横向铺开两倍长度，用 translateX 平移，当第一张图完全移出视口时，第二张同图刚好补上——视觉上无断点。关键在动画时长和位移距离要严格匹配。
@keyframes scrollImages {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.scrolling-wrapper {
overflow: hidden;
white-space: nowrap;
}
.scrolling-images {
display: inline-block;
animation: scrollImages 20s linear infinite;
animation-play-state: running;
}
.scrolling-images:hover {
animation-play-state: paused;
}
-
translateX(-50%)是关键：表示移动自身宽度一半，因为图片是双份排列 - 动画时长
20s要根据图片总宽度和期望速度算：比如 4 张图各宽 300px，总宽 2400px，想每秒移 30px，就得设2400 / 30 = 80s -
animation-play-state比pointer-events: none可靠，悬停即停，再移出继续
HTML 结构必须这样写（少一个 class 就断）
不能套多层容器，不能加多余 div，否则 inline-block 失效，空格变间隙，滚动就卡顿。
<div class="scrolling-wrapper">
<div class="scrolling-images">
@@##@@
@@##@@
@@##@@
@@##@@
<!-- 复制一遍，顺序不变 -->
@@##@@
@@##@@
@@##@@
@@##@@
</div>
</div>
- 两张图之间不能换行或加空格，否则生成空格字符，
white-space: nowrap也压不住 - 所有
img必须设相同高度（比如height: 200px），否则基线对不齐，上下抖动 - 如果图宽不一致，得统一用
width: 25%+flex布局，但那就不是纯 CSS 滚动了
移动端触摸暂停失效？加这三行 JS 补漏
CSS :hover 在手机上没用，用户划着划着就停不了。不需要框架，三行就够了：
const el = document.querySelector('.scrolling-images');
el.addEventListener('touchstart', () => el.style.animationPlayState = 'paused');
el.addEventListener('touchend', () => el.style.animationPlayState = 'running');
- 别用
ontouchstart，iOS Safari 对它有 300ms 延迟 - 不要监听整个 wrapper，只监听滚动内容本身，否则手指滑动图片时误触发
- 如果页面有多个走马灯，给每个加唯一
id，用querySelector精准选中
真正难的不是让图动起来，而是让动得匀速、不跳、不闪、不卡、不抢焦点——这些细节藏在 transform 的数值精度、animation-timing-function 的选择、以及图片加载时机里。抄完代码先测三遍：缩放窗口、切后台再切回来、快速连续悬停，有一处抖动，就是 translateX 没对齐或者图片没撑满容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
