跑马灯
Marquee
别名:横向滚动广告位跑马灯无限滚动条带循环滚动横幅滚动字幕
这是什么
一条内容带在水平方向匀速循环滚动，首尾无缝衔接。 用于 logo 墙、合作方名单、公告与促销横幅——用"连续流动"表达数量多与不间断， 而不是引导用户逐条读完。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 合作方/logo 墙，展示"很多谁在用我们"
- 公告条、促销横幅的循环展示
- 内容远超容器宽度且无需逐条阅读
✕ 不适用场景
- 用户必须读完的关键信息（读不完就焦虑）
- 需要停顿细看、可交互的条目
- 移动端窄屏塞长条带（速度感知更快更晕）
常见形式
无缝拼接
Seamless
内容复制两份位移 -50% 循环，首尾无接缝
悬停暂停
Hover pause
hover 时 animation-play-state: paused 方便查看
反向双条
Reverse pair
两条反向滚动，制造张力，编辑感首屏常用
实现要点
overflow: hidden@keyframes translateX 0 → -50%linear infiniteanimation-play-state: paused把内容复制两份放进 flex 容器，animation: marquee Xs linear infinite，keyframes 到 translateX(-50%)， 两份内容宽度一致才无缝。时长 15～40s 视内容量而定，匀速不缓动。 hover 暂停用 animation-play-state；尊重 prefers-reduced-motion 改为静态可横向滚动。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目落地页添加合作方 logo 跑马灯。 先检查现有 logo 资源与间距令牌。 要求： - 内容复制两份实现无缝循环，匀速不缓动 - 悬停暂停；聚焦时也暂停（可访问性） - 装饰属性：aria-hidden，不进入无障碍阅读流 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格搭配使用围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
页面搭配使用元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效相似概念把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效相似概念