css制作夜光效果

夜光效果实现方法

通过CSS的box-shadow和text-shadow属性结合动画，可以模拟夜光效果。以下是具体实现方式：

元素发光效果

.glow-element {
  background-color: #2a2a2a;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(0, 255, 255, 0.7);
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 10px 3px rgba(0, 255, 255, 0.5);
  }
  to {
    box-shadow: 0 0 25px 8px rgba(0, 255, 255, 0.9);
  }
}

文字发光效果

.glow-text {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
  animation: text-pulse 1.5s ease-in-out infinite;
}

@keyframes text-pulse {
  0%, 100% {
    text-shadow: 0 0 5px #00ffff;
  }
  50% {
    text-shadow: 0 0 15px #00ffff, 0 0 20px #00ffff;
  }
}

进阶技巧

多重阴影增强效果

.advanced-glow {
  box-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0ff,
    0 0 20px #0ff;
}

悬停交互效果

.hover-glow:hover {
  filter: drop-shadow(0 0 8px rgba(100, 255, 255, 0.8));
  transition: filter 0.3s ease;
}

颜色选择建议

• 青色/蓝色（#00ffff/#0ff）适合科技感夜光
• 紫色（#9d00ff）适合神秘氛围
• 绿色（#00ff00）适合生化主题
• 使用HSLA颜色可更好控制透明度：

  box-shadow: 0 0 15px hsla(180, 100%, 50%, 0.7);

性能优化

避免过多发光元素同时动画，对移动端设备可减少阴影扩散值。考虑使用will-change属性优化渲染：

.glow-element {
  will-change: box-shadow;
}