css transition与box-shadow结合制作立体悬浮效果

通过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);
}

说明：

Narration Box

Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等

27

查看详情

• 初始阴影：轻微偏移与模糊，表现“贴地”感。
• 悬停阴影：更大偏移与模糊半径，视觉上像“浮起”。
• 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），太快无感，太慢拖沓。

基本上就这些，不复杂但容易忽略细节。