当前位置：首页 > CSS

css制作灯光

2026-02-12 22:45:09CSS

使用CSS制作灯光效果

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

css制作灯光

使用box-shadow创建聚光灯效果

.spotlight {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.3);
}

使用text-shadow创建霓虹灯文字效果

.neon-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de,
    0 0 80px #ff00de;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #ff00de,
      0 0 40px #ff00de,
      0 0 80px #ff00de;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

使用filter属性创建发光效果

.glow-effect {
  filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.7));
  transition: filter 0.3s ease;
}

.glow-effect:hover {
  filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.9));
}

结合伪元素创建3D灯光效果

.light-bulb {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffeb3b;
}

.light-bulb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, transparent 50%);
  box-shadow: 0 0 30px 15px rgba(255, 235, 59, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.8; }
}

这些CSS技术可以单独使用或组合使用，创造出各种逼真的灯光效果。通过调整颜色、大小、模糊度和动画参数，可以实现不同的灯光风格。