无缝跑马灯（Infinite Marquee）是什么：效果预览与 AI 设计提示词

效果预览

◆ Nova● Orbit▲ Summit✦ Lumen■ Forge◆ Nova● Orbit▲ Summit✦ Lumen■ Forge

两端渐隐 · 悬停暂停

适合用在哪

Logo 墙、客户评价滚动带、关键词标签云、公告轮播。

容易踩的坑

两份内容宽度不完全一致或 gap 未计入，循环到 -50% 时出现明显跳帧。
持续滚动超过 5 秒却不提供暂停，违反 WCAG 2.2.2，干扰注意力障碍用户。
复制的那一份没加 aria-hidden="true"，读屏会把所有内容重复念两遍。

设计提示词 · Prompt

无缝跑马灯（Infinite Marquee）：内容复制两份放进一条 flex 轨道（width:max-content、gap 与内容间距一致），动画 translateX(0→-50%) 匀速循环（20-30s linear infinite）——因为两份内容等宽，-50% 恰好无缝衔接。两端加 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) 渐隐。悬停时 animation-play-state:paused。变体：上下两条反向滚、鼠标位置控制滚动速度。内容必须首尾相接等宽，否则会跳。

Infinite Marquee: duplicate the content twice inside one flex track (width:max-content, gap equal to the content spacing), animate translateX(0→-50%) at constant speed in a loop (20-30s linear infinite) — because both copies are equally wide, -50% joins seamlessly. Add mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) at both ends to fade out. On hover use animation-play-state:paused. Variants: two rows scrolling in opposite directions, mouse position controlling scroll speed. The content must join end to end with equal width, otherwise it jumps.

常见搭配

同一页面里经常和「无缝跑马灯」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

Logo 跑马灯Logo Marquee Logo 云Logo Cloud 减弱动效偏好Reduced Motion

演示 HTML 结构

<div class="s d-marquee">
  <div class="d-marquee__track">
    <span class="d-marquee__chip">◆ Nova</span><span class="d-marquee__chip">● Orbit</span><span class="d-marquee__chip">▲ Summit</span><span class="d-marquee__chip">✦ Lumen</span><span class="d-marquee__chip">■ Forge</span><span class="d-marquee__chip">◆ Nova</span><span class="d-marquee__chip">● Orbit</span><span class="d-marquee__chip">▲ Summit</span><span class="d-marquee__chip">✦ Lumen</span><span class="d-marquee__chip">■ Forge</span>
  </div>
  <span class="d-marquee__cap">两端渐隐 · 悬停暂停</span>
</div>