色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 畫小閃電

林子帆2年前11瀏覽0評論

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,在需要的地方插入樣式即可。