どうも！LSSです！！
と２回、borderとborder-radiusを使用しての花火に挑戦してきましたが、３度目となる今回は「全く別の方法」で花火に挑戦してみます！
花火その３
コード
<style><!--
@keyframes hnb{
0%{top:300px;width:5px;height:2px;}
60%{top:0px;width:5px;height:2px;}
80%{top:0px;width:150px;height:10px;}
100%{top:0px;width:150px;height:0px;}
}
.c1{
position:absolute;
display:inline-block;
transform-origin:0%;
background-image:linear-gradient(90deg,transparent 30%,transparent 32%,lightblue 50%,transparent 50%,transparent 52%,orange 70%,transparent 70%,transparent 72%,red 90%);
animation:hnb 12s linear infinite normal;
color:#ffffff00;
}
--></style>
<div style="position: relative; left: 150px;">
<div class="c1" style="transform: rotateZ(0deg);">.</div>
<div class="c1" style="transform: rotateZ(30deg);">.</div>
<div class="c1" style="transform: rotateZ(60deg);">.</div>
<div class="c1" style="transform: rotateZ(90deg);">.</div>
<div class="c1" style="transform: rotateZ(120deg);">.</div>
<div class="c1" style="transform: rotateZ(150deg);">.</div>
<div class="c1" style="transform: rotateZ(180deg);">.</div>
<div class="c1" style="transform: rotateZ(210deg);">.</div>
<div class="c1" style="transform: rotateZ(240deg);">.</div>
<div class="c1" style="transform: rotateZ(270deg);">.</div>
<div class="c1" style="transform: rotateZ(300deg);">.</div>
<div class="c1" style="transform: rotateZ(330deg);">.</div>
</div>
解説その１：linear-gradient
今回はborderを使わず、花火の一本の光線をlinear-gradientで表現しています。
linear-gradientについては、
などの記事で扱いましたが、例えば
<div style="
display: inline-box;
width: 150px;
height: 10px;
background-image: linear-gradient(90deg,transparent 30%,transparent 32%,lightblue 50%,transparent 50%,transparent 52%,orange 70%,transparent 70%,transparent 72%,red 90%);
"> </div>
というコードで、
↑こんな線が描けます。
もうちょっと分かりやすく、枠線をつけると、
こういう色塗りをした長方形になるんですね。
グラデーションの色位置指定はちょっと分かりにくかったので、別途記事にしています。
グラデーションになる部分、きっぱり色が分かれる部分を使い分けて
こういう色塗り線を構成しています。
解説その２：rotateZ
今回の花火のコード中、
<div style="position: relative; left: 150px;">
<div class="c1" style="transform: rotateZ(0deg);">.</div>
<div class="c1" style="transform: rotateZ(30deg);">.</div>
～中略～
<div class="c1" style="transform: rotateZ(300deg);">.</div>
<div class="c1" style="transform: rotateZ(330deg);">.</div>
</div>
と、同じような行がたくさん並んでいる箇所があり、その中に
style="transform: rotateZ(0deg);"
という指定をしています。
このそれぞれの<div>タグが、それぞれ１本１本の光線になります。
（class="c1"を指定し、<style>タグ側でlinear-gradientその他を指定しています）
で、このrotateZですが、これは
「指定した角度分、平面上で回転させる」
という指示になります。
例えば…
<div style="transform: rotateZ(30deg); transform-origin: 0%;">傾きます～</div>
のように書くと、
こうなりますｗ
ちなみに、transform-origin: 0%;は「回転の中心を左端にする指定」です。
100%にすると右端、省略すると50%を指定したのと同じになります。
元のコードは、0deg（deg＝度）から330degまで、30deg刻みで全方向分用意しているので、同じような<div>がたくさん並んでいたんですね。
よく似たプロパティで、
に、transform:rotateYというのが出てきますが、rotateYは立体回転になるので奥行のサイズを指定する必要があったのに対し、rotateZは平面上での回転になるので奥行の指定は不要です。こっちのほうが楽ですねｗ
解説その３：keyframeアニメーション
ここは花火１・２と同じでkeyframeでCSSプロパティを変化させる事で、アニメーションを実現しています。
keyframeアニメーションについては↑の記事にも書いていますが、今回のコードは
@keyframes hnb{
0%{top:300px;width:5px;height:2px;}
60%{top:0px;width:5px;height:2px;}
80%{top:0px;width:150px;height:10px;}
100%{top:0px;width:150px;height:0px;}
}
となっています。
アニメーション開始時点では、
0%{top:300px;width:5px;height:2px;}
という設定になります。
top:300px;（最初の位置は300ピクセル下の場所）
width:5px;（光線のサイズ、幅5ピクセル）
height:2px;（光線のサイズ、高さ2ピクセル）
という指定で
「打ち上げ開始時、だいぶ下の方でかなり小さいサイズで描画」
させています。
アニメーションに指定した時間の60%が経過した時点では、
60%{top:0px;width:5px;height:2px;}
という設定になります。
「光線サイズは打ち上げ開始時と同じ小さいまま、位置だけが上から300→0ピクセルのところまで上昇」
させている事になります。
keyframeアニメーションはグラデーションと同じく「途中経過を自動的に補完」してくれるので、300ピクセル位置から0ピクセル位置まで、ゆっくり上がっていくアニメーションになります^^
アニメーションに指定した時間の80%が経過した時点では、
80%{top:0px;width:150px;height:10px;}
という指定をしています。
位置はtop:0px;のままで、光線のサイズがいきなり「幅5→150、高さ2→10」に巨大化しています！
これが30degごとに全方位を向いた光線に一斉に反映されるので、
「花火が大きく広がる様子」
のアニメーションになります^^
経過時間80%の時点で広がりきった花火、これが経過時間100%の時点で、
100%{top:0px;width:150px;height:0px;}
と、位置・幅は変わらないまま、「高さだけ0ピクセル」になります。
0ピクセル、って事は表示されないのと同じ事ですが、80%時点で高さは10ピクセルだったので、「10→0に徐々に変化」していくアニメーションになります。
これで、「最大まで広がった花火が徐々に細って消えていく」事になりました^^
あとがき
花火１と２は「思いついたお手軽な表現」でしたが、「なぜかiPhoneで見られない」という現象が起こっていました^^;;;
今回は根本的に違う表現方法を用いたので、果たしてうまく見れますでしょうか？
追記
どうも、はてなブログの特性でコピペ時に中身のない<div>タグが勝手に消されるという問題がまた発生していたので、一部コード修正しました^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
