css制作发光文字

使用 text-shadow 实现基础发光效果

通过 text-shadow 属性为文字添加多层阴影，模拟发光效果。以下代码展示白色发光文字：

.glowing-text {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de;
}

• 前两组阴影创造基础白光晕
• 后两组添加粉色光晕扩散效果
• 数值分别控制X/Y偏移和模糊半径

结合动画实现动态发光

通过CSS动画让发光效果产生呼吸式变化：

@keyframes pulse {
  0% { text-shadow: 0 0 5px #fff; }
  50% { text-shadow: 0 0 20px #00fffc, 0 0 30px #0084ff; }
  100% { text-shadow: 0 0 5px #fff; }
}
.animated-glow {
  animation: pulse 2s infinite;
}

使用 filter: drop-shadow() 实现高级效果

适用于需要更复杂光效的场景：

.filter-glow {
  color: cyan;
  filter: drop-shadow(0 0 5px currentColor) 
          drop-shadow(0 0 15px currentColor);
}

• currentColor 自动继承文字颜色
• 多层阴影叠加增强立体感

霓虹灯文字特效实现

模拟霓虹灯管效果需结合边框和阴影：

.neon {
  color: #ff14bd;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #ff14bd;
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff inset;
}