如何使用CSS制作一个带有发光效果的脉冲Loading圆圈？-css教程-PHP中文网

用box-shadow实现发光脉冲需三层递进阴影+scale/opacity联动动画，关键帧中每帧声明全部属性并采用cubic-bezier(.4,0,.6,1)缓动，控制最大spread≤24px且避免inset阴影，配合css变量适配主题与深色模式。

如何使用css制作一个带有发光效果的脉冲loading圆圈？

用 `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，但仅在动画触发前动态添加，不用全局设——否则内存占用上升

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

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

下载

响应式与主题适配：发光色不能写死 `#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: 变体控制明暗差异