# 跑马灯 Marquee

> 一排内容从右往左匀速无限循环，两边渐隐，鼠标放上去停下来。

分类：动效 · 角色：点缀（贴在某个元素上，一页两三个）
[全部组件和流程](https://www.dachuiai.com/llms.txt) · [动效选型规则](https://www.dachuiai.com/guides/motion.md)

## 给 AI：用户把这个组件发给了你

1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。
2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[动效选型规则](https://www.dachuiai.com/guides/motion.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。
3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。
4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。

## 什么时候用

- 适合：合作伙伴 Logo、用户评价、媒体报道。
- 不适合：要用户点选的重要内容（会跑走）；内容少于 5 个（重复太明显）。
- 适合的网站：官网、SaaS、电商、活动页、作品集
- 放在：内容区
- 手机上：好用：手机上不能悬停暂停，速度放慢一点。
- 性能代价：低：纯 CSS 动画。
- 常搭配：[数字滚动 Count Up](https://www.dachuiai.com/c/count-up.md)、[滚动出现 Scroll Reveal](https://www.dachuiai.com/c/scroll-reveal.md)

## 装进项目

- 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。
- 依赖：`npm i lucide-react`（lucide-react 只有最后的演示示例用到；不留示例的话，删掉对应的 import 就不用装）
- 文件：原样存成 `marquee.tsx`（比如 `src/components/marquee.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/marquee.tsx)，比手抄准：`curl -fsSL -o src/components/marquee.tsx https://www.dachuiai.com/code/marquee.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。
- 导出：`Marquee` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。
- 图片：示例用了本站的 [/tex/s1.jpg](https://www.dachuiai.com/tex/s1.jpg)、[/tex/s2.jpg](https://www.dachuiai.com/tex/s2.jpg)、[/tex/s3.jpg](https://www.dachuiai.com/tex/s3.jpg)、[/tex/s4.jpg](https://www.dachuiai.com/tex/s4.jpg)、[/tex/s5.jpg](https://www.dachuiai.com/tex/s5.jpg)、[/tex/s6.jpg](https://www.dachuiai.com/tex/s6.jpg)。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。
- 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。
- Next.js（有 app 文件夹）：文件第一行加 `'use client';`。
- 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。
- 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。
- 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。
- 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。

## 参数

| 参数 | 默认值 | 作用 |
| --- | --- | --- |
| `children` |  | 包在里面的内容 |
| `duration` | `30` | 走完一圈要几秒，越大越慢 |
| `reverse` | `false` | 反方向 |
| `pauseOnHover` | `true` | 鼠标放上去时停下 |
| `gap` | `16` | 间距（px） |
| `className` | `''` | 加在最外层的类名，用来调大小、位置、间距 |

## 你可以说

> 合作伙伴 Logo 墙做成 Marquee 跑马灯：匀速从右往左无限循环，两边渐隐，鼠标放上去停下来。

## 完整代码

```tsx
import type {ReactNode} from 'react';
import {Star} from 'lucide-react';

/* ---------------------------------------------------------------
 * Marquee 跑马灯
 * 一排内容从右往左无限循环地滚，匀速走；鼠标放上去停下来，方便看清。
 * 内容复制一份接在后面，滚完一份正好无缝接上。
 * ------------------------------------------------------------- */
type MarqueeProps = {children: ReactNode; duration?: number; reverse?: boolean; pauseOnHover?: boolean; gap?: number; className?: string};

export function Marquee({children, duration = 30, reverse = false, pauseOnHover = true, gap = 16, className = ''}: MarqueeProps) {
  return (
    <div
      className={`mq group flex overflow-hidden [mask-image:linear-gradient(90deg,transparent,#000_8%,#000_92%,transparent)] ${className}`}
      style={{'--mq-dur': `${duration}s`, '--mq-gap': `${gap}px`} as React.CSSProperties}
    >
      <style>{MQ_CSS}</style>
      {[0, 1].map((k) => (
        <div
          key={k}
          aria-hidden={k === 1}
          className={`mq-track flex shrink-0 ${reverse ? 'mq-rev' : ''} ${pauseOnHover ? 'group-hover:[animation-play-state:paused]' : ''}`}
        >
          {children}
        </div>
      ))}
    </div>
  );
}

const MQ_CSS = `
.mq-track { gap: var(--mq-gap); padding-right: var(--mq-gap); animation: mq-move var(--mq-dur) linear infinite; }
.mq-rev { animation-direction: reverse; }
@keyframes mq-move { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .mq { overflow-x: auto; } }
`;

/* ---------------- 示例：合作伙伴 Logo 墙 + 用户评价 ---------------- */
const BRANDS = [
  ['Nova', '#3B82F6', 'circle'], ['Lumen', '#F59E0B', 'tri'], ['Orbit', '#10B981', 'dia'], ['Kite', '#EF4444', 'ring'],
  ['Atlas', '#8B5CF6', 'hex'], ['Echo', '#06B6D4', 'bolt'], ['Pixel', '#EC4899', 'circle'], ['Vertex', '#84CC16', 'ring'],
] as const;
const Glyph = ({c, k}: {c: string; k: string}) => (
  <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden>
    {k === 'circle' && <circle cx="12" cy="12" r="9" fill={c} />}
    {k === 'tri' && <path d="M12 3 L21 19 H3 Z" fill={c} />}
    {k === 'dia' && <rect x="5" y="5" width="14" height="14" rx="4" fill={c} transform="rotate(45 12 12)" />}
    {k === 'ring' && <><circle cx="12" cy="12" r="8" fill="none" stroke={c} strokeWidth="4" /><circle cx="12" cy="12" r="3" fill={c} /></>}
    {k === 'hex' && <path d="M12 2.5 L20.5 7.25 V16.75 L12 21.5 L3.5 16.75 V7.25 Z" fill={c} />}
    {k === 'bolt' && <path d="M13 2 L5 13.5 H11 L10 22 L19 10 H13 Z" fill={c} />}
  </svg>
);
const QUOTES = [
  ['小林', '上线速度快了一倍', '/tex/s1.jpg'], ['阿杰', '设计终于不用返工', '/tex/s2.jpg'], ['Mia', '客户说页面很高级', '/tex/s3.jpg'],
  ['老周', '一个人就做完了官网', '/tex/s4.jpg'], ['Rita', '动效一句话就改对', '/tex/s5.jpg'], ['大熊', '比外包省心多了', '/tex/s6.jpg'],
];

export default function MarqueeDemo() {
  const logo = ([n, c, k]: readonly [string, string, string]) => (
    <div key={n} className="flex h-16 w-44 items-center justify-center gap-2.5 rounded-2xl border border-white/10 bg-white/[.04] text-xl font-extrabold tracking-tight text-zinc-200 transition-colors hover:border-white/30 hover:text-white">
      <Glyph c={c} k={k} />{n}
    </div>
  );
  return (
    <section className="space-y-5 bg-[#0B0B10] py-14">
      <p className="text-center text-sm font-semibold text-white/40">超过 2,000 个团队在用</p>
      <Marquee duration={28}>{BRANDS.map(logo)}</Marquee>
      <Marquee duration={45} reverse gap={20}>
        {QUOTES.map(([n, q, src]) => (
          <figure key={n} className="w-72 shrink-0 rounded-2xl border border-white/10 bg-white/[.04] p-5">
            <div className="flex items-center gap-3">
              <img src={src} alt="" className="size-10 rounded-full object-cover" />
              <div>
                <div className="text-sm font-bold text-white">{n}</div>
                <div className="flex gap-0.5 text-amber-400">{Array.from({length: 5}, (_, i) => <Star key={i} size={12} fill="currentColor" strokeWidth={0} />)}</div>
              </div>
            </div>
            <blockquote className="mt-3 text-[15px] text-white/65">“{q}”</blockquote>
          </figure>
        ))}
      </Marquee>
      <Marquee duration={32}>{[...BRANDS].reverse().map(logo)}</Marquee>
    </section>
  );
}
```