无缝走马灯:重复轨道与暂停 | 星雨笔录

构建可循环、可悬停暂停的走马灯。

核心: 把内容复制两份并连续移动轨道,形成无缝滚动;悬浮时可以暂停。

最小示例:

.track { display: flex; width: max-content; animation: slide 12s linear infinite; }
.track:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

学完能做: 构建可循环、可悬停暂停的走马灯。