HOVER · 悬停交互
参数调改
PLAYGROUND
阴影偏移--shadow_px
214
弹起距离--lift_px
010
过渡时长--dur_ms
60500
阴影颜色--shadow_color
卡片底色--card_color
文字/描边色--text_color
弹起缓动--ease
实现要点
NOTES- 01
neobrutalism 硬阴影只有一处 magic number 组合:box-shadow 的 x/y 偏移等于 --shadow_px、blur 固定为 0、spread 为 0——blur 必须为 0 才有『印刷色块』的硬边感,加 blur 就变成普通浮层阴影。
- 02
弹起的核心等式:hover 位移量 = 阴影增量。元素向左上移 lift_px,阴影从 shadow_px 增长到 shadow_px + lift_px,视觉上物体保持贴在『桌面』上,只是被顶起;两个量不相等会出现悬空或穿桌的破绽。
- 03
transition 同时过渡 transform 与 box-shadow;box-shadow 走重绘路径,但小面积卡片 + 短时长(160ms)实测无感;要更极致可改用两层伪元素做阴影再过渡 transform,成本更高但全程合成器路径。
- 04
:active 压回平面(位移与阴影同时归零)形成完整的『悬停弹起 - 按下压平』手感闭环,chip 上键盘 focus-visible 复用同一状态保证可访问操作。
- 05
回弹缓动 cubic-bezier(0.34, 1.56, 0.64, 1) 的超调量让弹起有『蹦』的一下;用于超大元素时把 dur_ms 压短,否则超调会显得拖沓。
- 06
无障碍:reduced-motion 下取消位移过渡,悬停只保留阴影变化(或直接无过渡变色),文字与控件功能不受影响。
源代码
SOURCE
加载源代码…