实现CSS动画卡片阴影动态变化需使用box-shadow配合@keyframes和animation。首先创建.card元素并设置基础样式，包括默认阴影；接着定义@keyframes shadowPulse，使阴影在0%、50%、100%关键帧中由浅变深再恢复，形成脉动效果；然后将animation绑定到卡片，设置2s无限循环，或通过:hover触发0.6s悬停动画，并用forwards保持最终状态；进阶可添加多层阴影增强立体感，同时优化性能，避免过度重绘，确保动画流畅。
要实现CSS动画卡片阴影的动态变化，核心是利用box-shadow属性配合@keyframes和animation来创建平滑过渡的阴影效果。这种效果常用于卡片悬停、加载状态或视觉反馈场景，能显著提升页面交互感。
1. 基础结构：定义卡片元素
先创建一个简单的HTML卡片容器，在CSS中设置基本样式。
<div class="card"></div>
为卡片添加基础样式，包括尺寸、背景色和默认阴影：
.card {
width: 200px;
height: 200px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 50px auto;
}
2. 定义关键帧动画：控制box-shadow变化
使用@keyframes设定阴影在动画过程中的不同状态。例如让阴影从浅到深再扩散，模拟“呼吸”或“激活”效果。
立即学习“前端免费学习笔记（深入）”；
@keyframes shadowPulse {
0% {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
100% {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
}
这个动画会让阴影先变大变深，再恢复原状，形成脉动效果。
3. 应用动画：绑定到卡片元素
将定义好的动画通过animation属性应用到卡片上，可设置持续时间、循环次数和缓动函数。
.card {
/* 其他样式 */
animation: shadowPulse 2s ease-in-out infinite;
}
这样卡片就会持续执行阴影脉冲动画。若只想在悬停时触发，可以结合:hover使用：
.card:hover {
animation: shadowPulse 0.6s ease-out forwards;
}
注意： 使用forwards能让动画结束时保持最后一帧状态，适合一次性增强反馈。
4. 进阶技巧：多层阴影与性能优化
你可以给box-shadow设置多个值，实现更丰富的立体感。
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 100, 255, 0.3);
动画时可分别控制每层阴影的变化节奏。同时建议：
- 避免频繁重绘，优先使用
transform和opacity（但box-shadow本身对GPU优化也不错） - 控制动画频率，长时间运行的动画尽量轻量
- 在移动端考虑关闭复杂动画以节省电量
基本上就这些。通过合理配置box-shadow和@keyframes，你可以轻松实现各种动态阴影效果，让界面更具活力又不失优雅。
