css制作夜光

使用CSS实现夜光效果

通过CSS的box-shadow和text-shadow属性可以轻松创建夜光效果，结合动画增强视觉表现。以下是几种实现方式：

基础夜光效果（静态）

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

动态呼吸灯效果

@keyframes pulse {
  0% { box-shadow: 0 0 5px #0ff; }
  50% { box-shadow: 0 0 20px #0ff, 0 0 30px #0ff; }
  100% { box-shadow: 0 0 5px #0ff; }
}
.breathing-glow {
  animation: pulse 2s infinite;
}

霓虹灯文字效果

.neon-text {
  color: #fff;
  text-shadow: 
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0ff,
    0 0 82px #0ff,
    0 0 92px #0ff;
}

悬停增强效果

.hover-glow {
  transition: text-shadow 0.3s;
}
.hover-glow:hover {
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
}

高级技巧

多重阴影叠加 通过叠加多层阴影创造更强烈的光晕：

.intense-glow {
  box-shadow: 
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 8px #0ff,
    0 0 10px #0ff,
    0 0 12px #0ff;
}

颜色渐变光效 结合CSS渐变与阴影：

.gradient-glow {
  background: linear-gradient(45deg, #0ff, #f0f);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);
}

注意事项

• 调整阴影模糊半径（第三个参数）控制光晕扩散程度
• 使用RGBA颜色值可实现半透明光效
• 过强的发光效果可能影响性能，需适度使用
• 考虑添加will-change: transform;优化动画性能