通过box-shadow与transition结合实现卡片悬浮效果，先设置基础阴影与过渡动画，再于hover状态增加阴影偏移与模糊值，配合多层阴影和cubic-bezier缓动函数，增强视觉层次与立体感。
卡片的浮动阴影效果在现代网页设计中非常常见，尤其用于提升交互反馈和视觉层次。通过结合 box-shadow 和 transition，可以让卡片在用户悬停时产生“浮起”感，模拟真实世界中的光影变化。下面介绍如何实现这一效果。
基础卡片结构
先构建一个简单的HTML卡片容器：
<div class="card"><h3>标题</h3>
<p>这是一段描述内容。</p>
</div>
对应的CSS基础样式：
.card {width: 300px;
padding: 20px;
background-color: #fff;
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.15);
}
这里将垂直偏移从 4px 增加到 12px，模糊半径也加大，使阴影更扩散，视觉上像是卡片被抬高了。
优化过渡动画
transition 属性控制阴影变化的流畅度。建议设置缓动函数为 ease 或 cubic-bezier，让动画更自然：
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
这种贝塞尔曲线能实现“快进慢出”的动效，符合 Material Design 的推荐标准，提升用户体验。
多层阴影增强立体感
可以使用逗号分隔的多重阴影来模拟更复杂的光照效果：
box-shadow:0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
hover 状态下再增强：
.card:hover {box-shadow:
0 4px 8px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.15);
}
多层阴影能更好地表现深度，让卡片看起来真正“漂浮”在背景之上。
基本上就这些。通过合理调整 box-shadow 参数并配合平滑的 transition，就能轻松实现自然的浮动效果，适用于产品卡片、按钮或任何需要强调交互的元素。不复杂但容易忽略细节，比如阴影颜色透明度和动画时长，调好这些才能显得高级。
