css制作夜光

使用CSS实现夜光效果

夜光效果可以通过CSS的box-shadow、text-shadow和filter属性实现，结合动画增强视觉效果。以下是几种常见方法：

使用box-shadow实现元素发光

通过为元素添加多层阴影并设置模糊半径，模拟发光效果：

.glow-box {
  width: 100px;
  height: 100px;
  background: #09f;
  border-radius: 50%;
  box-shadow: 
    0 0 10px #09f,
    0 0 20px #09f,
    0 0 40px #09f;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 10px #09f;
  }
  to {
    box-shadow: 0 0 30px #09f;
  }
}

使用text-shadow实现文字发光

通过为文字添加多重阴影创造发光效果：

.glow-text {
  color: #fff;
  text-shadow: 
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff;
  font-size: 2rem;
}

使用filter: drop-shadow()实现动态发光

配合CSS动画实现呼吸灯效果：

.glow-filter {
  width: 50px;
  height: 50px;
  background: #f0f;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px #f0f);
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    filter: drop-shadow(0 0 5px #f0f);
  }
  50% {
    filter: drop-shadow(0 0 20px #f0f);
  }
}

使用CSS变量控制发光颜色

通过变量实现颜色动态变化：

:root {
  --glow-color: #ff0;
}

.glow-variable {
  width: 80px;
  height: 80px;
  background: var(--glow-color);
  box-shadow: 0 0 30px var(--glow-color);
  transition: box-shadow 0.3s;
}

.glow-variable:hover {
  --glow-color: #f00;
}

结合伪元素增强效果

使用::before或::after创建光晕层：

.glow-pseudo {
  position: relative;
  width: 120px;
  height: 120px;
  background: #0f0;
}

.glow-pseudo::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 0 25px #0f0;
  z-index: -1;
}

实际应用中可根据需求调整颜色值、阴影大小和动画参数。现代浏览器还支持mix-blend-mode属性，可以创建更复杂的发光混合效果。