卡片上浮 | wjs-css-effects

卡片标题

悬停查看上浮效果，阴影增强与边框变色同步过渡。

另一张卡片

多卡片并排时，上浮能突出当前焦点，引导用户注意。

关键点

卡片上浮通过 transform: translateY() 向上位移 + 阴影增强模拟悬浮感
box-shadow 从浅到深、从近到远变化，配合位移强化立体层次
使用 transition 让位移和阴影同步过渡，整体效果更流畅自然
上浮距离通常在 4-12px 之间，过大会显得不真实，太小则效果不明显
可配合 scale(1.02) 微放大，进一步增强"被拿起"的视觉暗示

效果说明

最常见的卡片悬停交互。hover 时卡片向上微移 (translateY)、阴影增强 (box-shadow)、边框变色，三者用同一组 transition 平滑过渡。简单却有效，是列表/网格卡片提升交互质感的基础手法。