CSS畫小閃電，是一項(xiàng)非常有趣的技能。下面，我們將介紹如何使用CSS來畫一道小閃電。

.flash {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 15px 10px;
border-color: transparent transparent #fff transparent;
position:relative;
animation: flash 1s ease infinite;
transform-origin: center bottom;
}
@keyframes flash {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
100% {transform: scale(1);}
}
.flash:before,
.flash:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.flash:before {
border-width: 0 55px 55px 0;
border-color: transparent #fff transparent transparent;
}
.flash:after {
border-width: 0 0 55px 55px;
border-color: transparent transparent transparent #fff;
}

我們首先創(chuàng)建一個(gè)具有特定寬度和高度的div，并使用邊框樣式來繪制小閃電。我們使用CSS的animation屬性，使小閃電動(dòng)態(tài)氛圍。

接下來，我們使用:before和:after偽元素，對(duì)閃電進(jìn)行進(jìn)一步的修飾。我們對(duì)它們進(jìn)行細(xì)致的定位，使它們與原始div的邊框相互吻合，使其更像真正的閃電。

小閃電的樣式已經(jīng)完成了。現(xiàn)在只需添加相應(yīng)的HTML，在需要的地方插入樣式即可。