如何实现CSS发光圆环效果 为按钮内SVG元素复刻1:1同款效果

你需要的发光圆环效果可以通过以下两种方案实现，可根据业务场景选择：

方案1：CSS实现（适配性强，无需修改SVG内部代码） #

直接给包裹SVG的按钮元素添加对应样式即可：

<button class="glow-btn">
  <!-- 替换为你的实际SVG内容 -->
  <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
    <circle cx="24" cy="24" r="20" stroke="#fff" stroke-width="2"/>
  </svg>
</button>

.glow-btn {
  background: #1a1a1a;
  border: none;
  border-radius: 50%;
  padding: 8px;
  cursor: pointer;
  position: relative;
  /* 核心多层发光效果 */
  box-shadow: 
    0 0 4px rgba(139, 92, 246, 0.8),
    0 0 8px rgba(139, 92, 246, 0.6),
    0 0 16px rgba(139, 92, 246, 0.4),
    0 0 32px rgba(139, 92, 246, 0.2);
  /* 呼吸动画，可自行调整时长 */
  animation: glowPulse 2s ease-in-out infinite alternate;
}

.glow-btn svg {
  display: block;
}

@keyframes glowPulse {
  from {
    box-shadow: 
      0 0 4px rgba(139, 92, 246, 0.8),
      0 0 8px rgba(139, 92, 246, 0.6),
      0 0 16px rgba(139, 92, 246, 0.4),
      0 0 32px rgba(139, 92, 246, 0.2);
  }
  to {
    box-shadow: 
      0 0 8px rgba(139, 92, 246, 1),
      0 0 16px rgba(139, 92, 246, 0.8),
      0 0 32px rgba(139, 92, 246, 0.6),
      0 0 64px rgba(139, 92, 246, 0.3);
  }
}

你可以自行修改rgba内的色值、阴影模糊半径、动画时长，匹配你要的1:1效果。

方案2：SVG内置滤镜实现（和SVG强绑定，无需依赖外层样式） #

如果需要SVG在任意场景复用都自带发光效果，可直接把滤镜写在SVG内部：

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义发光滤镜 -->
  <defs>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur1"/>
      <feGaussianBlur stdDeviation="8" result="blur2"/>
      <feGaussianBlur stdDeviation="16" result="blur3"/>
      <feMerge>
        <feMergeNode in="blur3"/>
        <feMergeNode in="blur2"/>
        <feMergeNode in="blur1"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <!-- 发光圆环层 -->
  <circle cx="24" cy="24" r="22" stroke="#8b5cf6" stroke-width="1" filter="url(#glow)" opacity="0.8"/>
  <!-- 替换为你的实际SVG内容 -->
  <circle cx="24" cy="24" r="20" stroke="#fff" stroke-width="2"/>
</svg>

如果要加呼吸动画，直接通过CSS修改滤镜的stdDeviation属性或者发光层的opacity属性即可。

内容的提问来源于stack exchange，提问作者Ibra