登录
输入您的凭据以访问您的账户。
安装
示例
2 个边框光束
正在播放
Stairway to Heaven - Led Zeppelin
2:458:02
反向
登录
输入您的凭据以访问您的账户。
弹簧动画
用法
import { BorderBeam } from "@/components/magicui/border-beam";<div className="relative h-[500px] w-full overflow-hidden">
<BorderBeam />
</div>属性
边框光束
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 应用于组件的自定义类 |
大小 | number | 50 | 光束大小 |
持续时间 | number | 6 | 动画持续时间（秒） |
delay | number | 0 | 动画开始前的延迟 |
colorFrom | string | #ffaa40 | 光束渐变的起始颜色 |
colorTo | string | #9c40ff | 光束渐变的结束颜色 |
transition | 过渡 | - | 自定义运动过渡配置 |
样式 | React.CSSProperties | - | 要应用的自定义 CSS 样式 |
反向 | 布尔值 | 否 | 是否反转动画方向 |
initialOffset | number | 0 | 初始偏移位置（0-100） |
边框宽度 | number | 1 | 光束边框宽度 |