用box-shadow实现发光脉冲需三层递进阴影+scale/opacity联动动画，关键帧中每帧声明全部属性并采用cubic-bezier(.4,0,.6,1)缓动，控制最大spread≤24px且避免inset阴影，配合CSS变量适配主题与深色模式。
用 box-shadow 实现基础发光脉冲效果
发光脉冲的核心不是动画多个图层，而是单个元素通过 box-shadow 叠加多层阴影 + opacity 和 transform: scale() 联动变化。直接写 text-shadow 或只用一层 box-shadow 会显得单薄、不“呼吸”。
推荐写法：给一个 div 设置圆形宽高、border-radius: 50%，然后用三层递进的 box-shadow 模拟光晕扩散：
.pulse-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #3b82f6;
box-shadow:
0 0 0 0 rgba(59, 130, 246, 0.4),
0 0 0 10px rgba(59, 130, 246, 0.2),
0 0 0 20px rgba(59, 130, 246, 0.1);
animation: pulse 2s infinite;
}注意：所有阴影的
spread radius（第三个长度值）必须为正数且递增，blur radius（第二个）建议为 0，否则边缘发虚、脉冲感变弱。
用 @keyframes 控制脉冲节奏，避免卡顿
CSS 动画卡顿往往源于关键帧设计不合理。不要用 0% { opacity: 0.5 } → 100% { opacity: 1 } 这种线性渐变——人眼对亮度变化敏感，会导致“闪”而不是“柔脉冲”。
正确做法是让尺寸、透明度、阴影范围同步变化，并用 cubic-bezier(.4, 0, .6, 1)（即 ease-in-out 的更平滑变体）控制缓动：
@keyframes pulse {
0% {
transform: scale(0.95);
opacity: 0.7;
box-shadow:
0 0 0 0 rgba(59, 130, 246, 0.4),
0 0 0 8px rgba(59, 130, 246, 0.2),
0 0 0 16px rgba(59, 130, 246, 0.1);
}
70% {
transform: scale(1.05);
opacity: 1;
box-shadow:
0 0 0 4px rgba(59, 130, 246, 0.5),
0 0 0 12px rgba(59, 130, 246, 0.3),
0 0 0 24px rgba(59, 130, 246, 0.15);
}
100% {
transform: scale(0.95);
opacity: 0.7;
box-shadow:
0 0 0 0 rgba(59, 130, 246, 0.4),
0 0 0 8px rgba(59, 130, 246, 0.2),
0 0 0 16px rgba(59, 130, 246, 0.1);
}
}要点：
• 不要只在 0% 和 100% 定义状态，中间加一个 70% 强化“膨胀顶点”
•
transform: scale() 必须参与，纯靠阴影变化缺乏立体感• 所有属性必须在每一帧都声明，否则浏览器会补间出意外过渡
兼容性与性能陷阱：别让 box-shadow 拖垮低端设备
在旧版 Safari 或 Android Webview 中，多层大范围 box-shadow 可能触发软件渲染，导致掉帧。实测发现：当总阴影宽度（最外层 spread 值）超过元素尺寸 2.5 倍时，iOS 14–15 下 60fps 很难维持。
优化方案：
• 把最大 spread radius 控制在 24px 以内（对应 40px 圆圈）
• 避免使用 inset 阴影，它和外阴影叠加会加重计算负担
• 在 @supports (backdrop-filter: blur(1px)) 环境下可考虑用 backdrop-filter + 半透明白色 overlay 替代部分发光，但需降级兜底
• 动画容器加上 will-change: transform, opacity，但仅在动画触发前动态添加，不用全局设——否则内存占用上升
响应式与主题适配：发光色不能写死 #3b82f6
硬编码颜色会让组件无法随深色模式或品牌色切换。直接用 CSS 自定义属性最稳妥：:root { --pulse-color: #3b82f6; }.pulse-circle { background: var(--pulse-color); }
然后所有 rgba() 中的 RGB 值都拆成 rgb(var(--pulse-rgb)) 形式（需预计算）或改用 color-mix(in srgb, var(--pulse-color), transparent 70%)（现代浏览器支持）。
更实际的做法：
• 提供 data-theme="dark" 属性，用属性选择器覆盖阴影透明度：[data-theme="dark"] .pulse-circle { box-shadow: ... rgba(59, 130, 246, 0.2) ...; }
• 避免用 hsl() 动态算色，Safari 对 hsl() 在 box-shadow 中的支持不稳定
• 如果项目已用 Tailwind，别手写这些——直接用 animate-pulse + shadow-lg 组合，再通过 dark: 变体控制明暗差异
真正难的不是让圆圈“动起来”，而是让光晕的衰减节奏、色彩透明度、缩放幅度三者在 60fps 下严丝合缝地协同。很多实现看着在动，但停顿一帧就能看出阴影没跟上缩放，或者暗部残留太重——那通常是因为关键帧里漏写了某个属性，或者用了不稳定的缓动函数。
