纯css闪电效果需用cubic-bezier或steps模拟炸裂感，时长60–120ms，叠加预闪与分叉伪元素，配合drop-shadow光效和gpu加速实现逼真残影与随机性。
怎么用 CSS 实现逼真的闪电闪烁效果
纯 CSS 就能做出接近真实闪电的瞬时强光+残影+随机性，关键不是“闪一下”，而是模拟光脉冲的不规则性与视觉暂留。用 animation 配合 opacity 和 filter: brightness() 是最轻量、兼容性最好的方式，不需要 JS 或 canvas。
- 避免只用
opacity: 0 → 1 → 0线性动画——人眼对毫秒级突变敏感，线性过渡会显得像灯泡开关，不是闪电 - 必须用
steps(1, end)或极短的animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9)模拟“炸开感” - 单次动画时长控制在
60ms–120ms内，超过 150ms 就开始像频闪灯 - 真实闪电常有 2–4 次微弱预闪（先导放电），可用多层
@keyframes叠加实现
如何让闪电位置和形状随机变化
CSS 本身不支持运行时随机值，但可以通过预设多套 class + JS 触发切换，或利用伪元素 + clip-path 做低成本“形变”。最实用的是用 SVG <path></path> 定义不规则闪电轮廓，再用 CSS 控制其显示/隐藏和亮度。
- 用
clip-path: polygon(...)手动描一个锯齿状路径，比border-radius圆角更硬朗 - 给同一个容器加多个伪元素（
::before,::after），各自绑定不同animation-delay和transform: rotate()，制造“分叉感” - 若需每次点击/触发都不同，JS 只需切换 class 名（如
flash-1→flash-2），CSS 提前写好 5–8 种 opacity/brightness/offset 组合 - 慎用
box-shadow模拟光晕——高斯模糊在低端设备上掉帧严重，改用多层半透明div叠加更稳
为什么 filter: drop-shadow() 比 text-shadow 更适合闪电光效
text-shadow 只作用于文字内容，且无法对整个元素发光；而 drop-shadow() 是 SVG 滤镜，能对任意形状（包括 clip-path 剪裁后）投射柔和光边，且支持硬件加速。
-
drop-shadow(0 0 30px #fff)比text-shadow: 0 0 30px #fff在非文字元素上直接无效 - 配合
animation动态改drop-shadow的第三参数（模糊半径），可模拟光强衰减——例如从drop-shadow(0 0 80px #ffeb3b)快速缩到drop-shadow(0 0 10px #fff) - 注意 Safari 对
drop-shadow的inset支持不全，别用inset drop-shadow - 如果目标是全屏白光闪（如雷击反馈），直接操作
body::before全屏遮罩层，用background: rgba(255,255,255,0.8)+opacity动画更省资源
移动端和低配设备上的性能陷阱
闪电动画高频闪烁极易触发重绘（repaint），尤其在 iOS Safari 上，opacity 动画若没开启硬件加速，会卡顿甚至跳帧。
- 务必加
transform: translateZ(0)或will-change: opacity强制 GPU 加速（但别滥用，每个元素都加反而降低性能） - 避免在动画中同时修改
width/height/left/top——这些触发布局（layout），闪电效果里只需改opacity、filter、transform - Android WebView 对
cubic-bezier()支持不稳定，建议 fallback 到steps(1, end)或用@keyframes显式写出 0%→99%→100% 关键帧 - 测试时关掉浏览器开发者工具——DevTools 开启时渲染管线降级，动画表现失真，容易误判效果
真正难的不是让光“闪起来”，而是让每一次闪都让人来不及反应又留下印象。随机延迟、亮度曲线、残影衰减节奏，这三个变量调不好，再炫的代码也只是个高级 blink 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
