动效与动画

悬停上浮 Hover Lift

悬停时元素上浮几像素并投下更深的阴影,像被拿起来了

悬停我

(自动演示中,也可用鼠标悬停感受)

**悬停上浮(Hover Lift)**是“这个东西可以点”最通用的视觉暗示:上浮 6~10px + 阴影同步加深。单独上浮或单独加深阴影都不到位——两者同步才会让大脑解读为“物体在三维空间里被拿起来了”(浮得高,影子理应更远更散)。

什么时候用:一切可点击的卡片、列表项、商品缩略图。它是比“弹性悬停放大”更克制商务的选择,两者别叠加使用。

对 AI 说清楚的三要素:① 上浮量 610px;② 阴影同步加深(y 偏移和模糊半径都增大);③ 0.250.35s ease 过渡。

复制即用的提示词片段

卡片悬停上浮(Hover Lift):translateY(-8px) 同时阴影从
0 2px 8px 加深为 0 14px 30px,过渡 0.3s ease;
阴影加深与上浮必须同步,共同构成"被拎起来"的错觉。