如何在CSS中实现图片阴影渐变动画_animation box-shadow技巧-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-14 17:20:47

原创

269人浏览过

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

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

在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. 应用动画到元素

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

立即学习“前端免费学习笔记（深入）”；

Narration Box

Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等

查看详情

.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 动画不复杂但容易忽略细节，比如避免使用过大的扩散值导致页面重绘性能下降。合理控制模糊半径和颜色透明度，能让阴影更真实自然。

以上就是如何在CSS中实现图片阴影渐变动画_animation box-shadow技巧的详细内容，更多请关注php中文网其它相关文章！