如何用css实现卡片阴影渐变动画

P粉602998670 2025-10-24 00:00:00 次阅读

答案：通过CSS的box-shadow和transition属性实现卡片阴影渐变动画，结合hover状态改变阴影大小与透明度，并可使用filter或多重阴影增强立体感。

要实现卡片阴影的渐变动画，核心是利用 CSS 的 box-shadow 和 transition 属性，配合伪元素或滤镜（filter）来增强视觉效果。下面是一种简洁、实用的方法，让卡片在鼠标悬停时产生柔和的阴影扩散动画。

基础卡片结构

先创建一个简单的卡片 HTML 结构：

卡片内容

使用 box-shadow 实现渐变阴影动画

通过设置默认阴影和悬停时的更大阴影，结合过渡效果实现平滑动画。

CSS 样式如下：

.card {
  width: 200px;
  height: 120px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 50px auto;
}

.card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

说明：

默认状态使用较轻的阴影 rgba(0,0,0,0.1)
hover 时阴影范围和模糊值增大，颜色稍深
transition 让阴影变化更自然

进阶：使用 filter 实现更柔和的阴影扩散

如果想让阴影看起来更“发散”或“发光”，可以用 filter: drop-shadow() 配合过渡。

.card {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
  transition: filter 0.3s ease;
}

.card:hover {
  filter: drop-shadow(0 12px 25px rgba(0,0,0,0.2));
}

优点：