css制作灯光

使用CSS制作灯光效果

CSS可以通过多种方式模拟灯光效果，包括阴影、渐变、模糊和动画。以下是几种常见的灯光效果实现方法。

使用box-shadow模拟光源

通过box-shadow属性可以创建类似灯光照射的效果，适合制作聚光灯或点光源。

.light-source {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  box-shadow: 
    0 0 60px 30px rgba(255, 255, 255, 0.8),
    0 0 100px 60px rgba(255, 255, 255, 0.6);
}

使用渐变创建环境光

线性渐变或径向渐变可以模拟环境光或柔和的灯光效果。

.ambient-light {
  width: 300px;
  height: 200px;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  );
}

添加动画使灯光闪烁

CSS动画可以让灯光效果更加生动，模拟闪烁或呼吸灯效果。

@keyframes flicker {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

.flickering-light {
  animation: flicker 2s infinite;
}

结合filter属性增强效果

filter属性中的blur和brightness可以进一步增强灯光效果。

.glow-effect {
  filter: blur(5px) brightness(1.2);
}

使用mix-blend-mode实现光晕

mix-blend-mode属性可以让灯光与背景更好地融合，创造更自然的光晕效果。

.light-overlay {
  mix-blend-mode: screen;
  background: rgba(255, 200, 100, 0.5);
}

响应式灯光效果

结合鼠标或触摸事件，可以创建交互式灯光效果。

.container:hover .light {
  transform: scale(1.2);
  opacity: 1;
}

这些方法可以单独使用或组合应用，根据具体需求调整参数值以达到最佳的视觉效果。通过CSS变量还可以轻松实现主题切换或动态调整灯光颜色和强度。