通过@keyframes定义box-shadow变化并结合animation属性，可实现脉冲、发光等阴影动画效果；利用transition与:hover配合，可触发平滑阴影过渡；多重阴影叠加则能创建霓虹灯等复杂视觉，需注意性能优化。
在CSS中实现阴影变化动画，关键在于使用 animation 和 box-shadow 属性结合 @keyframes。通过定义关键帧中的 box-shadow 变化，可以让元素产生发光、悬浮、脉冲等视觉效果。
1. 基础语法与关键帧定义
要让 box-shadow 动起来，先用 @keyframes 定义动画过程中阴影的变化。可以调整阴影的偏移、模糊半径、扩散范围和颜色。
@keyframes shadowPulse {0% {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 0 20px 10px rgba(0, 123, 255, 0.6);
}
100% {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
}
上面的例子创建了一个“脉冲”效果：阴影从普通状态扩大再收缩回来。
2. 应用动画到元素
定义好关键帧后，通过 animation 属性将其应用到目标元素。
立即学习“前端免费学习笔记（深入）”；
.glow-button {padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
animation: shadowPulse 2s infinite ease-in-out;
}
这个按钮会持续执行 shadowPulse 动画，每2秒循环一次，呈现呼吸式发光效果。
3. 控制动画触发时机
有时不需要一直播放动画，而是希望用户交互时才触发动画。可以用 :hover 配合 transition 实现平滑过渡，或用 :focus-within 触发。
.card {width: 200px;
height: 120px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
这种方式虽不是 animation，但利用 transition 实现了更自然的阴影变化，适合悬停反馈。
4. 多重阴影与复杂动画
box-shadow 支持多个阴影叠加，可在动画中同时改变多个阴影层，制造更丰富的视觉层次。
@keyframes neonGlow {0%, 100% {
box-shadow:
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #0ff,
0 0 40px #0ff;
}
50% {
box-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #0f0,
0 0 20px #0f0;
}
}
这种多重阴影动画常用于霓虹灯风格的设计，注意性能影响，避免过度渲染。
基本上就这些。掌握 @keyframes 定义、animation 应用和 transition 过渡三种方式，就能灵活控制 box-shadow 的动态表现。关键是合理设置模糊和扩散值，让动画看起来自然流畅。不复杂但容易忽略细节。
