CSS动画如何实现卡片阴影渐变_box-shadow @keyframes配合hover

卡片阴影渐变效果可以通过 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 就能自动插值实现渐变。