通过transition与box-shadow实现元素立体悬浮效果，常用于按钮、卡片等交互组件。正常状态使用轻微阴影表现贴地感，悬停时增大阴影深度与范围模拟抬高，并结合transition使变化平滑。可配合transform: translateY(-4px)增强抬起错觉，选用cubic-bezier缓动曲线提升流畅度。适用于需视觉反馈的场景，注意阴影不宜过重，移动端应考虑active状态替代hover，transition时间建议0.2–0.4s以保持自然响应。
使用 CSS 的 transition 与 box-shadow 可以轻松实现元素的立体悬浮效果，常用于按钮、卡片等交互组件，让用户感知到“可点击”或“有层次”的视觉反馈。
基本原理
当元素处于正常状态时，设置一个较轻的阴影；鼠标悬停时通过 box-shadow 增加阴影的深度和扩散范围，模拟“抬高”的立体感。结合 transition 让变化过程平滑过渡，而不是突兀切换。
基础代码示例
.card {
width: 200px;
height: 120px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
说明：
- 初始阴影：轻微偏移与模糊，表现“贴地”感。
- 悬停阴影：更大偏移与模糊半径，视觉上像“浮起”。
-
transition：控制阴影变化的缓动与持续时间，常用
ease或cubic-bezier获得自然感。
增强真实感的小技巧
让悬浮更生动，可以配合轻微缩放或调整位置：
立即学习“前端免费学习笔记（深入）”；
.card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
transform: translateY(-4px);
}
- transform: translateY(-4px)：元素略微上移，强化“抬起”错觉。
- cubic-bezier(0.25, 0.8, 0.25, 1)：比默认 ease 更顺滑的缓动曲线。
适用场景与注意事项
这类效果适合按钮、卡片、链接等需要交互反馈的元素。
- 避免阴影过重，以免显得笨拙。
- 在移动端注意 hover 效果可能不生效，需搭配 active 状态。
- 保持 transition 时间适中（0.2–0.4s），太快无感，太慢拖沓。
