Marquee
marquee跑马灯 · 纯 CSS 无缝循环 + hover 暂停 + 方向
用法
基础用法
子项无缝循环向左滚动，pauseOnHover 悬停时暂停。
ReactVueSvelteSolidAngularQwik
tsx
<Marquee pauseOnHover>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>图标墙（fade 渐隐）
fade 在两端加 mask 渐隐，配 icon 子项做 logo / 图标墙观感。
tsx
<Marquee fade pauseOnHover gap="1.25rem">
{logos.map((Icon, i) => (
<LogoTile key={i}>
<Icon className="size-6" />
</LogoTile>
))}
</Marquee>方向与速度
direction 控制方向，duration 越大越慢。
ReactVueSvelteSolidAngularQwik
tsx
<Marquee direction="right" duration={30} fade>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>竖向滚动（vertical）
vertical 沿 Y 轴滚动，需给容器固定高度。
ReactVueSvelteSolidAngularQwik
tsx
<Marquee className="h-56" vertical fade pauseOnHover>
{items.map((c) => (
<Chip key={c}>{c}</Chip>
))}
</Marquee>何时用
纯 CSS 无缝循环滚动一排内容（logo 墙、技术栈 chip、口碑条），支持横/竖向、渐隐遮罩、hover 暂停。要进入视口逐项淡入的列表用 AnimatedList；要用户能拖拽改顺序用 Sortable。
导入
ts
import { Marquee } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| direction | "left"｜"right" | "left" | 滚动方向；"right" 经 animation-direction: reverse |
| duration | number | 40 | 单轮时长（秒），越大越慢 |
| gap | string | "1rem" | 子项间距（CSS 长度） |
| pauseOnHover | boolean | false | 鼠标悬停暂停 |
| repeat | number | 4 | 子项复制份数（窄内容也铺满不露缝） |
| vertical | boolean | false | 竖向滚动；竖向时 direction="left" 视为向上、"right" 向下 |
| fade | boolean | false | 两端渐隐遮罩（mask-image），适合 logo/图标墙 |
| fadeWidth | string | "15%" | 渐隐区宽度（CSS 长度），仅 fade 为真时生效 |
| ...div | ComponentPropsWithoutRef\<"div"\> | — | 透传（className 控宽/高） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children * | ReactNode | 滚动子项 |
注：showcase controls 里duration默认演示值为 20、pauseOnHover/fade默认演示为 true，仅展示用；组件实际默认值以上表（接口 JSDoc）为准。
禁忌 / 坑
- 横向给外壳定宽（
w-*）、竖向给定高（h-*），否则无可视窗口、循环看不出来。 - 子项过窄时靠
repeat复制铺满才无缝；内容本身很少时调大repeat防止露缝。 - 纯 CSS 动画，无运行时；
fadeWidth只在fade开启时才生效。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
ReactVueSvelteSolidAngularQwik
<Marquee direction="left" duration={20} pauseOnHover={true} fade={true}>
{items}
</Marquee>