MOTION HUB

硬阴影弹跳

Shadow Pop
#shadow-pop · 52/72
HOVER · 悬停交互

参数调改

PLAYGROUND
阴影偏移--shadow_px
214
px
弹起距离--lift_px
010
px
过渡时长--dur_ms
60500
ms
阴影颜色--shadow_color
卡片底色--card_color
文字/描边色--text_color
弹起缓动--ease

实现要点

NOTES
  1. 01

    neobrutalism 硬阴影只有一处 magic number 组合:box-shadow 的 x/y 偏移等于 --shadow_px、blur 固定为 0、spread 为 0——blur 必须为 0 才有『印刷色块』的硬边感,加 blur 就变成普通浮层阴影。

  2. 02

    弹起的核心等式:hover 位移量 = 阴影增量。元素向左上移 lift_px,阴影从 shadow_px 增长到 shadow_px + lift_px,视觉上物体保持贴在『桌面』上,只是被顶起;两个量不相等会出现悬空或穿桌的破绽。

  3. 03

    transition 同时过渡 transform 与 box-shadow;box-shadow 走重绘路径,但小面积卡片 + 短时长(160ms)实测无感;要更极致可改用两层伪元素做阴影再过渡 transform,成本更高但全程合成器路径。

  4. 04

    :active 压回平面(位移与阴影同时归零)形成完整的『悬停弹起 - 按下压平』手感闭环,chip 上键盘 focus-visible 复用同一状态保证可访问操作。

  5. 05

    回弹缓动 cubic-bezier(0.34, 1.56, 0.64, 1) 的超调量让弹起有『蹦』的一下;用于超大元素时把 dur_ms 压短,否则超调会显得拖沓。

  6. 06

    无障碍:reduced-motion 下取消位移过渡,悬停只保留阴影变化(或直接无过渡变色),文字与控件功能不受影响。

源代码

SOURCE

加载源代码…