无缝走马灯:重复轨道与暂停 | 星雨笔录
构建可循环、可悬停暂停的走马灯。
核心: 把内容复制两份并连续移动轨道,形成无缝滚动;悬浮时可以暂停。
最小示例:
.track { display: flex; width: max-content; animation: slide 12s linear infinite; }
.track:hover { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
学完能做: 构建可循环、可悬停暂停的走马灯。