CSS畫小閃電,是一項非常有趣的技能。下面,我們將介紹如何使用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; }
我們首先創建一個具有特定寬度和高度的div,并使用邊框樣式來繪制小閃電。我們使用CSS的animation屬性,使小閃電動態氛圍。
接下來,我們使用:before和:after偽元素,對閃電進行進一步的修飾。我們對它們進行細致的定位,使它們與原始div的邊框相互吻合,使其更像真正的閃電。
小閃電的樣式已經完成了。現在只需添加相應的HTML,在需要的地方插入樣式即可。