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