无缝跑马灯

一排内容匀速横滚，首尾相接看不出断点

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

一圈时长 18s 条目间距 32px 方向 left

代码

<div class="marquee"><div class="marquee-track">
  <span>条目一</span><span>条目二</span><!-- …再复制一份完全相同的内容… -->
</div></div>
<style>
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; gap: 32px; width: max-content;
  animation: marquee 18s linear infinite ;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
</style>

<div class="overflow-hidden"><div class="flex w-max animate-[marquee_18s_linear_infinite] gap-[32px] hover:[animation-play-state:paused]">…×2…</div></div>
<!-- tailwind.config 里补 keyframes: marquee: { to: { transform: 'translateX(-50%)' } } -->

export function Marquee({ items }) {
  const seq = [...items, ...items];
  return (<div style={{ overflow: "hidden" }}>
    <div className="marquee-track">{seq.map((t, i) => <span key={i}>{t}</span>)}</div>
    <style>{`.marquee-track{display:flex;gap:32px;width:max-content;animation:marquee 18s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}`}</style>
  </div>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

秘诀是内容复制两份并排，轨道动画平移 -50% 后瞬间归位——因为后半段和前半段长得一模一样，跳回去也看不出来。速度用「每份内容的宽度 ÷ 期望时长」算，别写死。鼠标悬停暂停是基本礼貌；重要信息不要只放在跑马灯里。

How it works (English)

Duplicate the content twice side by side, animate the track to -50%, then snap back — the second half looks identical to the first, so the jump is invisible. Compute duration from one copy's width instead of hardcoding it. Pause on hover is basic courtesy, and never put critical information only in a marquee.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

无缝跑马灯 · 提示词待复验 · →