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 效果 - 按钮改为圆形