当前位置：首页 > CSS

css制作闪电效果

2026-03-12 14:29:01CSS

使用CSS动画制作闪电效果

通过CSS的animation和keyframes可以模拟闪电的瞬间闪烁效果。以下是一个基础实现方式：

css制作闪电效果

.lightning {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.lightning::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  animation: flash 5s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 0; }
  2%, 4%, 6%, 8% { opacity: 0.8; }
  3%, 5%, 7% { opacity: 0.1; }
}

闪电分支效果增强版

结合伪元素和变换实现更真实的闪电分支：

css制作闪电效果

.thunder {
  position: absolute;
  width: 3px;
  height: 200px;
  background: linear-gradient(to bottom, 
    transparent 10%, 
    white 50%, 
    transparent 90%);
  animation: strike 2s infinite;
}

@keyframes strike {
  0% { 
    transform: translate(50vw, -100px) rotate(10deg);
    opacity: 0;
  }
  5% { opacity: 1; }
  10% { 
    transform: translate(55vw, 100vh) rotate(-5deg);
    opacity: 0;
  }
}

SVG结合CSS实现复杂闪电

使用SVG路径定义闪电形状，通过CSS控制动画：

<svg class="svg-lightning" viewBox="0 0 100 100">
  <path d="M50 0 L60 30 L40 50 L65 70 L35 100" />
</svg>

.svg-lightning {
  width: 200px;
  stroke: white;
  stroke-width: 2;
  fill: none;
  animation: flicker 3s infinite;
}

@keyframes flicker {
  0%, 30%, 33%, 80%, 100% { opacity: 0; }
  31%, 32%, 81% { opacity: 1; }
}

背景渐变闪电效果

通过径向渐变模拟闪电发光范围：

.storm-bg {
  background: 
    radial-gradient(circle at 30% 40%, 
      rgba(255,255,255,0.8) 0%, 
      transparent 20%),
    #111;
  animation: storm 8s infinite;
}

@keyframes storm {
  95% { background-position: 0 0; }
  96% { background-position: -10px -20px; }
  97% { background-position: 10px 10px; }
  98% { background-position: 0 0; }
}

组合闪电与音效（HTML部分）

<div class="lightning-container">
  <div class="lightning-bolt"></div>
  <audio id="thunder" src="thunder.mp3" preload="auto"></audio>
</div>

.lightning-bolt {
  position: absolute;
  width: 4px;
  height: 0;
  background: white;
  box-shadow: 0 0 15px 2px yellow;
  animation: 
    bolt 0.5s linear infinite,
    flicker 0.3s infinite;
}

@keyframes bolt {
  to { height: 100vh; }
}

这些方法可根据实际需求调整动画时间、颜色和出现频率。更复杂的效果可能需要结合JavaScript动态控制动画触发时机。