当前位置：首页 > CSS

css制作灯光

2026-01-28 04:20:43CSS

使用CSS制作灯光效果

通过CSS的box-shadow和filter属性可以模拟灯光效果，结合动画增强视觉体验。

基础灯光效果

.light {
  width: 100px;
  height: 100px;
  background: #ffde59;
  border-radius: 50%;
  box-shadow: 0 0 60px 30px #ffde59;
}

动态呼吸灯效果

@keyframes breathe {
  0% { box-shadow: 0 0 10px 5px #ffde59; }
  50% { box-shadow: 0 0 60px 30px #ffde59; }
  100% { box-shadow: 0 0 10px 5px #ffde59; }
}
.breathe-light {
  animation: breathe 3s infinite;
}

霓虹灯文字效果

使用文字阴影和动画创建霓虹灯招牌风格：

.neon-text {
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de;
  animation: flicker 1.5s alternate infinite;
}
@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;
  }
  20%, 24%, 55% { text-shadow: none; }
}

聚光灯效果

通过径向渐变和混合模式实现聚焦照明：

.spotlight {
  position: relative;
}
.spotlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 50%,
    transparent 0%,
    rgba(0,0,0,0.7) 70%
  );
  pointer-events: none;
}

悬停灯光交互

为按钮添加悬停灯光效果：

css制作灯光

.glow-btn {
  transition: box-shadow 0.3s;
}
.glow-btn:hover {
  box-shadow: 
    0 0 15px #3a86ff,
    0 0 30px #3a86ff80,
    inset 0 0 15px #3a86ff40;
}