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