css制作夜光

使用CSS制作夜光效果

方法一：使用text-shadow和box-shadow实现文字和元素的夜光效果

为文字添加发光效果，可以通过text-shadow属性设置多个阴影层叠加，模拟夜光效果：

.glow-text {
  color: #fff;
  text-shadow: 
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff;
}

为元素添加发光边框，使用box-shadow实现：

.glow-box {
  background: #222;
  width: 200px;
  height: 100px;
  box-shadow: 
    0 0 10px #0fa,
    0 0 20px #0fa;
}

方法二：使用CSS动画增强动态夜光效果

通过@keyframes创建脉冲动画，使夜光效果更生动：

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; box-shadow: 0 0 15px #ff0; }
  100% { opacity: 0.8; }
}

.dynamic-glow {
  animation: pulse 2s infinite;
  background: #333;
  color: #ff0;
}

方法三：结合伪元素实现高级夜光

使用::before或::after创建光晕扩散效果：

.glow-advanced {
  position: relative;
  width: 100px;
  height: 100px;
  background: #444;
}

.glow-advanced::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 15px #f0f;
  z-index: -1;
}

方法四：使用filter: drop-shadow()实现非矩形发光

为不规则形状（如SVG图标）添加发光：

.glow-icon {
  filter: drop-shadow(0 0 8px #0af);
}

颜色选择建议

• 冷色调夜光：使用#0ff、#0af等蓝绿色系
• 暖色调夜光：使用#ff0、#f80等黄橙色系
• 霓虹效果：使用高饱和度颜色如#f0f

注意事项

• 多阴影叠加时建议从较小扩散值开始逐步增大
• 动画效果不宜过于频繁，避免视觉疲劳
• 移动端使用时需测试性能影响