Interaction
液体变形按钮
使用 SVG 滤镜实现粘稠液体变形效果的按钮。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a button with a liquid morphing effect. Use an SVG filter with feGaussianBlur and feColorMatrix to create a gooey merge between the button and a smaller orb that orbits or moves on hover. The button surface should feel fluid and organic. Use Tailwind CSS. Place on a dark background so the effect reads clearly.
中文提示词
创建一个带液体变形效果的按钮。使用 SVG 滤镜 feGaussianBlur 和 feColorMatrix,在按钮和一个悬停时环绕/移动的小球之间创建粘稠融合。按钮表面应感觉流动且有机。使用 Tailwind CSS。放置在深色背景上,使效果清晰可见。

Overview
使用 SVG 滤镜粘稠感让按钮像液体一样。工艺感强且引人注目。
Features
- SVG 滤镜粘稠效果
- 环绕/移动辅助球体
- feGaussianBlur + feColorMatrix
- 流动有机表面
- 深色背景
- 纯 CSS/SVG
Usage
适用于实验性 CTA、创意作品集或品牌时刻。
Customization
修改 prompt 以:
- 改变球体数量和运动路径
- 融合中使用多种颜色
- 添加点击 splash 效果
- 按钮改为圆形