For Tailwind CSS v3 docs, click here.

涟漪

一种动画涟漪效应,通常用于元素后面以强调它们。

通过 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/ripple.json"

手动安装

在同一个文件中,复制并粘贴以下代码:

Ripple.vue
RippleCircle.vue
RippleContainer.vue

示例

Only lines

Squared

Blobed

API

Prop 名称类型默认值描述
baseCircleSizenumber210The size of the main circle in pixels.
baseCircleOpacitynumber0.24The opacity of the main circle.
spaceBetweenCirclenumber70The space between each ripple circle in pixels.
circleOpacityDowngradeRationumber0.03The rate at which opacity decreases for each successive ripple circle.
circleClassstringundefinedCSS class name(s) for additional styling of circles.
waveSpeednumber80The animation speed for the wave effect, measured in ms.
numberOfCirclesnumber7The number of ripple circles to render.

感谢