这个效果是怎么做出来的
要点是把按钮和面板理解为同一个元素的两个状态，而不是两个元素之间的切换。展开时，胶囊的宽度、高度、圆角、文字透明度同时过渡到面板的尺寸和内容，过渡曲线用高阻尼弹簧（类似 cubic-bezier(0.34, 1.2, 0.4, 1) 这类先快后慢、略带越过的曲线），观感就像液体被拉开展开，而不是一个窗口弹出来。
细节上有两个关键。一是内容错帧：面板里的标题和正文比形变晚 100 到 150 毫秒淡入，观众会先看到「容器在流动」，再看到「内容浮现」，这个时间差正是流体感的来源。二是关闭走原路：收起时用同样的曲线反向过渡，内容先淡出、容器再缩回胶囊，两端衔接处没有任何跳变。全程只用 width/height 的受控过渡加 transform，配合 will-change 提前分层，动画期间不触发重排抖动。
怎么用这条提示词
这条提示词适合用在登录入口、筛选面板、快速发布这类轻量弹层场景。发给 AI 时说明你的按钮文字和面板内容，它会保留你的结构只加动画。如果你的页面已经有弹窗组件，可以让 AI 把这套形变改成包一层容器复用，不必重写业务逻辑。
想效果更好？试试这些
展开时长控制在 0.45 到 0.6 秒，短了看不出流体感，长了显得拖沓。面板尺寸不要和按钮差距过大，比例超过四倍时中途加一帧轻微的回缩会更自然。移动端记得把点击区域扩大到 44px 以上，并禁用双击缩放，否则快速点击会打断形变动画。