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: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #0ff;
  }
  to {
    text-shadow: 
      0 0 10px #fff,
      0 0 20px #0ff,
      0 0 30px #0ff;
  }
}

边框夜光效果

.glow-box {
  width: 200px;
  height: 100px;
  border: 2px solid #0ff;
  box-shadow: 
    0 0 5px #0ff,
    0 0 10px #0ff,
    inset 0 0 5px #0ff;
  animation: border-glow 2s linear infinite;
}

@keyframes border-glow {
  0% {
    box-shadow: 
      0 0 5px #0ff,
      0 0 10px #0ff;
  }
  50% {
    box-shadow: 
      0 0 15px #0ff,
      0 0 30px #0ff;
  }
  100% {
    box-shadow: 
      0 0 5px #0ff,
      0 0 10px #0ff;
  }
}

按钮夜光效果

.glow-btn {
  background: transparent;
  color: #0ff;
  border: 2px solid #0ff;
  padding: 10px 20px;
  transition: all 0.3s;
}

.glow-btn:hover {
  box-shadow: 
    0 0 10px #0ff,
    0 0 20px #0ff;
  text-shadow: 
    0 0 5px #0ff;
}

实现要点

• 使用多层阴影叠加增强发光效果
• 冷色调（如青色、蓝色）比暖色调更显夜光感
• 动画效果使发光更生动
• 暗色背景能更好突出发光效果

进阶技巧

.neon-effect {
  position: relative;
}

.neon-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 20px 5px #0ff;
  opacity: 0;
  transition: opacity 0.3s;
}

.neon-effect:hover::after {
  opacity: 1;
}

这些CSS技术可以组合使用，通过调整阴影大小、颜色和动画参数，可以创建不同强度的夜光效果。