どうも！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が使えるのでは？と思いましたが、おおむねうまくいきました^^
花火のイメージとしては、この広がりが何重かになってほしいところですが、そこはまた後ほど、ってことでｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
