如何在CSS中实现图片阴影渐变动画_animation box-shadow技巧

P粉602998670 2025-11-14 00:00:00 次阅读

通过box-shadow与@keyframes结合实现图片阴影渐变动画，先设置带圆角的容器和初始阴影，再定义关键帧动画改变阴影大小和透明度，形成呼吸效果，最后将动画绑定到元素并控制时长与循环方式，或通过:hover触发动画以提升性能。

在CSS中实现图片阴影渐变动画，关键在于利用 box-shadow 和 @keyframes 配合过渡效果，让阴影随着动画周期性变化。这种方式不会影响布局，视觉表现力强，适合用于悬浮提示、按钮增强或图片展示等场景。

1. 基础 box-shadow 设置

先为图片容器设置一个初始的投影效果。建议使用 border-radius 让图片圆角，使阴影更自然。

.img-container {
  display: inline-block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

2. 定义 keyframes 动画

通过 @keyframes 创建阴影强度和范围动态变化的动画。可以调整模糊半径和透明度来模拟“呼吸感”或“脉冲”效果。

@keyframes shadowPulse {
  0% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
}

3. 应用动画到元素

将定义好的动画绑定到图片容器，并控制动画时长、缓动函数和循环方式。

.img-container {
  animation: shadowPulse 2s ease-in-out infinite;
}

这样图片的阴影就会周期性地变大变强再恢复，形成一种柔和的“发光呼吸”效果。

4. 悬停触发动画（可选）

如果你希望动画只在用户悬停时出现，可以结合 :hover 使用 transition 而非无限动画。

.img-container {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.4s ease;
}

.img-container:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

这种方式更节省性能，适合交互式设计。

基本上就这些。box-shadow 动画不复杂但容易忽略细节，比如避免使用过大的扩散值导致页面重绘性能下降。合理控制模糊半径和颜色透明度，能让阴影更真实自然。