卡片阴影渐变可通过CSS实现，1. 创建HTML卡片容器；2. 设置基础样式与初始box-shadow；3. 可选@keyframes定义脉冲动画；4. 推荐用transition配合:hover实现平滑过渡；5. 进阶可设置多层阴影动态变化，确保格式一致以触发自动插值。
卡片阴影渐变效果可以通过 CSS 的 @keyframes 动画与 :hover 伪类结合实现，让鼠标悬停时 box-shadow 平滑过渡，增强交互感。
1. 基础结构：HTML 卡片容器
先创建一个简单的卡片元素：
卡片内容
2. 默认样式设置
为卡片设置基础样式和初始阴影：
.card {
width: 200px;
height: 120px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
3. 使用 @keyframes 定义阴影动画（可选）
如果希望阴影变化带节奏感（如脉冲），可用 @keyframes：
立即学习“前端免费学习笔记（深入）”；
@keyframes shadowPulse {
0% {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
100% {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
}
然后在 hover 中调用：
.card:hover {
animation: shadowPulse 0.6s ease-in-out forwards;
}
4. 更自然的做法：transition + hover 直接过渡
大多数场景下，直接使用 transition 更流畅且性能更好：
.card:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
transform: translateY(-4px);
}
配合上面设置的 transition: all 0.3s ease，阴影会自动渐变。
5. 进阶技巧：多层阴影动态变化
可以定义更丰富的多层阴影，在 hover 时切换：
.card {
box-shadow:
0 2px 8px rgba(0,0,0,0.08),
0 4px 16px rgba(0,0,0,0.08);
}
.card:hover {
box-shadow:
0 8px 16px rgba(0,0,0,0.12),
0 12px 48px rgba(0,0,0,0.16);
}
只要两个状态的阴影结构一致（数量、顺序），CSS 就能自动插值实现渐变。
注意：确保box-shadow 在默认和 hover 状态下的格式兼容，否则动画不会生效。避免从“无”突然到“有”，建议始终保留基础阴影。
基本上就这些。用 transition 实现渐变更推荐，@keyframes 适合特殊动效需求。
