HOVER · 悬停交互
参数调改
PLAYGROUND
主填充色--fill_color
副填充色--fill_color_alt
文字颜色--text_color
过渡时长--dur_ms
2001200
按钮圆角--radius_px
0999
缓动曲线--ease
实现要点
NOTES- 01
两个 175% 宽的圆形 blob 藏在按钮两端(scale 0.1 且位移出界),hover 时用 transform 位移+缩放滑向中央合拢,overflow:hidden 裁出液体边缘。
- 02
isolation:isolate 让 z-index:-1 的 blob 落在按钮背景之上、文字之下,避免负 z-index 逃逸到页面底层。
- 03
运动全程只有 transform(合成器路径),hover 触发零重排;过冲曲线(y > 1)让合拢瞬间有轻微回弹,是『液感』的关键。
- 04
--radius_px 从 0(直角矩形)到 999(胶囊)连续可调,blob 直径按按钮宽度百分比推导,宽度变化无需改参数。
- 05
prefers-reduced-motion 下把过渡时长压到 0.01ms,直接呈现填充后的终态。
- 06
预览态自动演示:body 未被 hover 时 blob 走 body:not(:hover) 下的演示动画周期(5.2s 填充-退回),光标进入 iframe 后动画立即让位给真实 hover 过渡。
源代码
SOURCE
加载源代码…