【CSS】花火のアニメ―ション【挑戦途中】

　どうも！LSSです！！

　今年の夏は、あちこちで花火大会が中止になってるようですね。

　今日は、ちょっと気分だけでも？と、「CSSでの花火作り」に挑戦してみました！

花火

 

コード

<style><!--
@keyframes hnb{
0%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted darkyellow;top:200px;left:150px;}
50%{border-radius: 1px; width: 2px; height: 2px; border: 6px dotted yellow;top:0px;left:150px;}
70%{border-radius: 60px; width: 120px; height: 120px; border: 6px dotted blue;top:-60px;left:90px;}
90%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted red;top:-100px;left:50px;}
100%{border-radius: 100px; width: 200px; height: 200px; border: 8px dotted #ff000000;top:-80px;left:50px;}
}
.hnbdm{
display:inline-block;
position:absolute;
animation:hnb 15s linear 0s infinite normal;
}
--></style>
<div style="position: absolute;">
<div class="hnbdm"> </div>
</div>

数日前から考えてましたが

昨日今日あたりに、花火のドットを表現するのに

border: 8px dotted red;

のようにdottedなborderが使えるのでは？と思いましたが、おおむねうまくいきました^^

花火のイメージとしては、この広がりが何重かになってほしいところですが、そこはまた後ほど、ってことでｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^