通过box-shadow与transition配合hover状态实现卡片悬停动效。首先构建基础卡片结构，设置默认阴影及0.3秒ease过渡效果；悬停时增强阴影为0 8px 24px rgba(0,0,0,0.15)，模拟浮起感；可选添加transform: translateY(-4px)提升立体交互。该方法简单有效，适用于博客或产品展示项目。
卡片组件的阴影变化是提升界面交互感的常用技巧。通过 box-shadow 和 transition 配合 hover 状态，可以实现鼠标悬停时平滑的阴影动效。下面介绍具体实现方法。
1. 基础卡片结构
先构建一个简单的卡片 HTML 结构：
<div class="card"> <h3>卡片标题</h3> <p>这是卡片内容描述。</p> </div>
2. 设置默认阴影与过渡效果
为卡片设置基础样式和初始阴影，并添加 transition 属性，使阴影变化更自然：
.card {
width: 300px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
说明： box-shadow 的四个值分别代表：水平偏移、垂直偏移、模糊半径、颜色。transition 定义了对 box-shadow 属性的变化持续 0.3 秒，使用 ease 缓动函数。
立即学习“前端免费学习笔记（深入）”；
3. 添加 Hover 状态增强阴影
当鼠标悬停时，增加阴影的深度和范围，模拟“抬升”效果：
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
这个状态下，阴影更明显，视觉上卡片像“浮起”一样，增强点击暗示。
4. 可选优化：配合 transform 提升交互感
可额外加入轻微位移或缩放，让效果更生动：
.card {
/* 其他样式保持不变 */
transition: all 0.3s ease;
}
<p>.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateY(-4px);
}</p>transform: translateY(-4px) 让卡片微微上移，与阴影结合更有立体感。
基本上就这些。掌握 box-shadow 和 transition 的配合，就能轻松实现自然的卡片悬停动效，适合用在博客、产品展示等初级项目中。不复杂但容易忽略细节，比如过渡时间和阴影层次的搭配。
