涟漪
一种动画涟漪效应,通常用于元素后面以强调它们。
通过 CLI 安装
手动安装
在同一个文件中,复制并粘贴以下代码:
示例
Only lines
Squared
Blobed
API
Prop 名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
baseCircleSize | number | 210 | The size of the main circle in pixels. |
baseCircleOpacity | number | 0.24 | The opacity of the main circle. |
spaceBetweenCircle | number | 70 | The space between each ripple circle in pixels. |
circleOpacityDowngradeRatio | number | 0.03 | The rate at which opacity decreases for each successive ripple circle. |
circleClass | string | undefined | CSS class name(s) for additional styling of circles. |
waveSpeed | number | 80 | The animation speed for the wave effect, measured in ms. |
numberOfCircles | number | 7 | The number of ripple circles to render. |
感谢
- Credits to Magic UI.
- Credits to SivaReddy Uppathi for porting this component.
- Credits to Nathan De Pachtere for updating this component.