Marquee 跑马灯
水平跑马灯组件，能够将文本、图片或任意卡片内容在水平轨道上进行无限无缝循环滚动。适合在营销页、Hero 引导区展示推荐标语或合作品牌。支持双向滚动、悬停暂停和边缘淡化效果，并通过 useReducedMotion 组合式函数自动适配系统动效偏好设置。
预览
Preview
⚡️ 快速流畅💥 新野蛮主义🚀 VUE 3 + TAILWIND🔥 受 SHADCN 启发
💻 代码与 BUG🛠️ 从构建到发布🌟 开源
变体
默认变体DEFAULT
静音变体MUTED
尺寸
小尺寸SMALL
大尺寸LARGE
提示：本组件尊重系统的「减少动态效果」设置。启用后跑马灯将停止滚动并以静态形式展示内容。
安装
pnpm dlx brutx-vue@latest add marquee用法
vue
<script setup>
import { Marquee } from 'brutx-ui-vue'
</script>
<template>
<Marquee :speed="20" fade>
<span>⚡️ FAST AND FLUID</span>
<span>💥 NEO-BRUTALISM</span>
<span>🚀 VUE 3 + TAILWIND</span>
</Marquee>
</template>变体
通过 variant 属性控制跑马灯的背景色与文字色。
| 变体 | 说明 |
|---|---|
default | 背景色背景，深色文字 |
primary | 主色（珊瑚红）背景 |
accent | 强调色（黄色）背景 |
muted | 静音色（灰）背景 |
vue
<Marquee variant="primary">
<span>主色跑马灯</span>
</Marquee>尺寸
通过 size 属性控制文字大小与内边距。
| 尺寸 | 说明 |
|---|---|
sm | 小号文字，紧凑内边距 |
default | 默认大小 |
lg | 大号文字，宽松内边距 |
vue
<Marquee size="lg">
<span>大号跑马灯</span>
</Marquee>Props
Marquee
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | 'left' | 'right' | 'left' | 跑马灯滚动方向 |
speed | number | 20 | 单次循环所耗费的秒数（数值越小速度越快） |
pauseOnHover | boolean | false | 鼠标悬停时是否暂停动画 |
fade | boolean | false | 是否开启左右边缘淡入淡出遮罩效果 |
variant | 'default' | 'primary' | 'accent' | 'muted' | 'default' | 背景与文字颜色变体 |
size | 'sm' | 'default' | 'lg' | 'default' | 文字大小与内边距 |
class | string | "" | 容器的自定义 CSS 类 |
可访问性
- 动效降级：组件尊重
prefers-reduced-motion系统设置。当用户启用"减少动态效果"时，移除轨道的滚动动画（添加[animation:none]），内容以静态形式展示，同时不再渲染用于无缝衔接的重复轨道副本（aria-hidden的镜像轨道），仅保留单份内容，避免视觉冗余。
该行为通过 useReducedMotion 组合式函数监听 prefers-reduced-motion: reduce 媒体查询实现，会随系统设置的切换实时响应，无需刷新页面。
样式定制
| 变量 | 默认值 | 说明 |
|---|---|---|
--speed | 20s | 单次循环动画时长，由 speed 属性自动设置 |