使用 box-shadow 与 transition 配合实现鼠标悬停阴影动画，.card 初始设轻微阴影并定义 transition: box-shadow 0.3s ease，悬停时增强阴影；2. 进阶可结合 transform: translateY(-6px) 模拟浮起，并用 cubic-bezier 调整动画节奏；3. 注意避免 transition: all 带来的性能问题，控制模糊半径，移动端缩短时间以提升响应。
想让卡片在鼠标悬停时平滑地出现阴影，提升界面交互感？用 box-shadow 搭配 transition 就能轻松实现。关键在于设置初始状态和悬停状态之间的样式变化，并通过 transition 控制过渡动画的流畅度。
1. 基础卡片结构
先写一个简单的卡片 HTML 结构：
<div class="card"><br> <h3>卡片标题</h3><br> <p>这里是卡片内容。</p><br></div>
2. 设置默认样式与阴影
给卡片设置基础样式，并定义初始无阴影或浅阴影状态：
.card {
width: 200px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 默认轻微阴影 */
transition: box-shadow 0.3s ease; /* 关键：启用阴影过渡 */
}
<p>.card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /<em> 悬停时加深放大阴影 </em>/
}这里 transition: box-shadow 0.3s ease 表示只对 box-shadow 属性做动画，持续 0.3 秒，使用缓动曲线，让效果更自然。
立即学习“前端免费学习笔记（深入）”；
3. 进阶技巧：配合 transform 提升浮动感
如果想让卡片“浮起”更明显，可以结合 transform 一起过渡：
.card {
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
<p>.card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
transform: translateY(-6px); /<em> 向上微移，模拟浮起 </em>/
}使用 cubic-bezier 可以自定义动画节奏，让浮起更有弹性。注意此时 transition 写成 all 或列出多个属性，确保 transform 也被包含。
4. 注意事项
- 避免对所有属性用 transition: all，可能影响性能或导致意外动画。
- 阴影值中的模糊半径（blur）不宜过大，否则页面重绘成本高。
- 移动端可适当缩短过渡时间，提升响应速度。
基本上就这些。掌握 box-shadow 和 transition 的配合，能让静态元素立刻变得有交互生命力。不复杂但容易忽略细节，比如缓动函数和初始值的一致性。
