怎样制作CSS呼吸灯渐变效果_利用keyframes改变box-shadow半径-css教程-PHP中文网

box-shadow半径无法动画，因属不可插值属性；应改用多层固定半径阴影+opacity动画，或伪元素+radial-gradient模拟呼吸光晕。

怎样制作css呼吸灯渐变效果_利用keyframes改变box-shadow半径

box-shadow 半径不能直接动画——这是最常被忽略的前提。CSS 规范中，box-shadow 的模糊半径（blur radius）和扩散半径（spread radius）属于「不可插值属性」，浏览器无法在关键帧间平滑过渡。你写 0 0 10px #fff → 0 0 40px #fff，实际效果是“跳变”而非“呼吸”，尤其在低端设备上会明显卡顿或闪烁。

为什么 box-shadow 半径动画看起来“动了”？

那为什么网上很多示例似乎能动？本质是两种错觉：

用 opacity 配合多个固定大小的 box-shadow 叠加（例如同时写 3 层不同半径的阴影，只调各自透明度），视觉上模拟“光晕扩散”
把 box-shadow 和 transform: scale() 混用，让人误以为是阴影在变大，其实是整个元素在缩放

真正想让光晕“由内向外柔和膨胀”，必须绕过半径动画这个死胡同。

用多层 box-shadow + opacity 实现可动画的“光晕呼吸”

这是目前最稳定、兼容性最好、且符合人眼呼吸节奏的做法。核心是：固定每层阴影的半径，只动画它们的 opacity 和 color（推荐用 rgba() 控制透明度）。

示例代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.breathing-light {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #2196f3;
  /* 三层固定半径阴影，opacity 可动画 */
  box-shadow:
    0 0 12px rgba(33, 150, 243, 0.4),
    0 0 28px rgba(33, 150, 243, 0.25),
    0 0 48px rgba(33, 150, 243, 0.15);
  animation: breathe-glow 2.8s ease-in-out infinite;
}
<p>@keyframes breathe-glow {
0% {
box-shadow:
0 0 12px rgba(33, 150, 243, 0.2),
0 0 28px rgba(33, 150, 243, 0.12),
0 0 48px rgba(33, 150, 243, 0.06);
}
50% {
box-shadow:
0 0 12px rgba(33, 150, 243, 0.7),
0 0 28px rgba(33, 150, 243, 0.45),
0 0 48px rgba(33, 150, 243, 0.28);
}
100% {
box-shadow:
0 0 12px rgba(33, 150, 243, 0.2),
0 0 28px rgba(33, 150, 243, 0.12),
0 0 48px rgba(33, 150, 243, 0.06);
}
}</p>

要点说明：

每层 box-shadow 的像素值（如 12px）保持不变，只改 rgba() 的 alpha 值
50% 关键帧设为峰值，确保“最亮时刻”有足够视觉停留感
总时长建议 ≥ 2.5s；低于 2s 容易被感知为闪烁，违反 WCAG 闪烁阈值（≤ 3Hz）
避免在 @keyframes 中混用单位不一致的写法，比如 rgba(33,150,243,0.2) 和 hsla(210,100%,50%,0.2) 同时出现，部分 Safari 版本会丢弃整条声明

替代方案：用伪元素模拟动态光晕

如果需要更精细控制“扩散感”，且不介意多一个 DOM 节点，可用 ::before 或 ::after 单独承载光晕，并对其 transform: scale() 和 opacity 动画——这两个属性 GPU 加速友好，无兼容问题。

关键写法：

.breathing-light {
  position: relative;
}
.breathing-light::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(33,150,243,0.6) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  animation: glow-pulse 2.6s ease-in-out infinite;
}
<p>@keyframes glow-pulse {
0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.8); }
50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.1); }
}</p>

这种方式的优势在于：