如何在CSS中实现阴影变化动画_animation box-shadow应用-css教程-PHP中文网

如何在CSS中实现阴影变化动画_animation box-shadow应用

P粉602998670

发布： 2025-11-15 11:25:02

原创

821人浏览过

通过@keyframes定义box-shadow变化并结合animation属性，可实现脉冲、发光等阴影动画效果；利用transition与:hover配合，可触发平滑阴影过渡；多重阴影叠加则能创建霓虹灯等复杂视觉，需注意性能优化。

如何在css中实现阴影变化动画_animation box-shadow应用

在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秒循环一次，呈现呼吸式发光效果。

Narration Box

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

查看详情

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 的动态表现。关键是合理设置模糊和扩散值，让动画看起来自然流畅。不复杂但容易忽略细节。

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