css怎么制作夜光

使用 text-shadow 和动画实现夜光效果

通过 text-shadow 为文字添加发光效果，结合 @keyframes 动画模拟呼吸式夜光：

.text-glow {
  color: #fff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  animation: glow 2s infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 5px #0ff; }
  to { text-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff; }
}

使用 box-shadow 实现元素边框夜光

为按钮或容器添加发光边框效果：

.button-glow {
  background: #222;
  border: 2px solid #0ff;
  box-shadow: 0 0 10px #0ff, inset 0 0 10px #0ff;
  transition: box-shadow 0.3s;
}
.button-glow:hover {
  box-shadow: 0 0 20px #0ff, inset 0 0 20px #0ff;
}

结合滤镜 filter: drop-shadow()

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

.icon-glow {
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8));
}

使用混合模式 mix-blend-mode

让夜光元素与背景混合增强效果：

.glow-overlay {
  background: rgba(0, 255, 255, 0.3);
  mix-blend-mode: screen;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

注意事项

• 调整 text-shadow 或 box-shadow 的模糊半径和颜色浓度可控制发光强度。
• 霓虹色（如 #0ff、#f0f）效果更接近真实夜光。
• 动画需配合 alternate 参数实现呼吸效果。