css制作夜光效果

夜光效果实现方法

夜光效果可以通过CSS的box-shadow、text-shadow和动画属性实现，以下为几种常见实现方式：

文字夜光效果

.glow-text {
  color: #fff;
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

按钮夜光效果

.glow-button {
  background: #222;
  color: cyan;
  border: 2px solid cyan;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px cyan, 0 0 20px cyan inset;
  transition: box-shadow 0.3s;
}

.glow-button:hover {
  box-shadow: 0 0 20px cyan, 0 0 30px cyan inset;
}

呼吸灯效果

.breathing-glow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #0ff;
  box-shadow: 0 0 20px #0ff;
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.7; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

实现要点

使用多层阴影叠加（如text-shadow或box-shadow的多值设置）可以增强发光强度。霓虹灯效果通常需要配合动画实现明暗交替变化。

颜色选择上推荐使用高饱和度的青色（cyan）、品红（magenta）或亮绿色（lime），这些颜色在暗色背景下发光效果更明显。

性能优化

避免过度使用阴影效果，特别是在移动设备上。可以通过will-change: transform;属性提示浏览器进行硬件加速：

.glow-element {
  will-change: transform;
}