css制作夜光

使用CSS制作夜光效果

通过CSS的box-shadow和text-shadow属性结合动画，可以模拟夜光效果。以下代码展示两种实现方式：

元素夜光效果（如按钮）

.glow-element {
  background-color: #0ff;
  width: 100px;
  height: 50px;
  border-radius: 10px;
  animation: glow 2s infinite alternate;
}

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

文字夜光效果

.glow-text {
  color: #fff;
  font-size: 2rem;
  animation: text-glow 1.5s ease-in-out infinite alternate;
}

@keyframes text-glow {
  from {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #ff00de;
  }
  to {
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #ff00de;
  }
}

增强夜光效果的关键参数

• 颜色选择：冷色调（如蓝/青）更适合夜光效果，使用HSL颜色值可精细控制： hsl(180, 100%, 50%)

• 多重阴影叠加：通过多层阴影增加深度感：

  

  box-shadow: 
    0 0 5px #fff,
    0 0 10px hsl(180, 100%, 70%),
    0 0 15px hsl(180, 100%, 50%);

• 动画曲线：使用cubic-bezier()自定义动画节奏：

  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);

浏览器兼容性处理

针对旧版浏览器添加前缀：

-webkit-animation: glow 2s infinite alternate;
-moz-animation: glow 2s infinite alternate;

通过调整阴影模糊半径和颜色透明度，可以实现不同强度的夜光效果。实际应用中建议配合will-change: box-shadow;优化性能。