如何在CSS中使用过渡制作卡片阴影浮动_box-shadow与transition结合

使用 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 秒，使用缓动曲线，让效果更自然。

立即学习“前端免费学习笔记（深入）”；

美间AI

美间AI：让设计更简单

261

查看详情

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 的配合，能让静态元素立刻变得有交互生命力。不复杂但容易忽略细节，比如缓动函数和初始值的一致性。

以上就是如何在CSS中使用过渡制作卡片阴影浮动_box-shadow与transition结合的详细内容，更多请关注php中文网其它相关文章！