【HTML&CSS】花火

はじめに

HTML5プロフェッショナル認定試験の勉強をしている中で、ふと、花火が作れそうだなと思ったことがきっかけです。
ネットで探してみると色々な花火がありましたが、下記の花火がとてもキレイだったので、CSSをアレンジさせて頂くことにしました。

• HTMLとCSSだけで花火をつくる【canvas/JavaScript不使用】
• 上記記事が参考にしたCodepen

アレンジした花火

こんな感じにアレンジさせて頂きました！
　① 背景色を夜になったばかりの色に
　② 花火が開いた後にピカッと
　③ 花火の粒子を増やしてリッチに
　④ 花火の粒子が丸くなるようにサイズ調整
　⑤ それぞれの花火の粒子の色は全て同じに

See the Pen Firework_html&css by Nina (@ifnezsju-the-selector) on CodePen.

ソースコード

HTML(特に変更なし)

<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>

CSS(アレンジ箇所はコメント参照)

body {
	/* ① 背景色を夜になったばかりの色に(グラデーション) */
	width: 100vw;
	height: 100vh;
	background: linear-gradient(#225 60%, #437);
}
@keyframes firework {
	0% { 
		transform: translate(-50%, 60vh);
		width: 0.5vmin;
		opacity: 1;
	}
	50% { 
		width: 0.5vmin;
		opacity: 1;
	}
	80% { 
		width: 45vmin; 
		opacity: 0; 
	}
	/* ② 花火が開いた後にピカッと(再度開いて閉じる) */
	90% { 
		width: 40vmin; 
		opacity: 1; 
	}
	100% { 
		width: 45vmin; 
		opacity: 0; 
	}
}
.firework,
.firework::before,
.firework::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	background:
    	/* ③ 花火の粒子を増やしてリッチに */
    	/* ④ 花火の粒子が丸くなるようにサイズ調整(background-sizeの半分より小さいサイズに) */
    	/* ⑤ それぞれの花火の粒子の色は全て同じに(--dot-color変数化) */
		radial-gradient(circle, var(--dot-color) 0.2vmin, #0000 0) 50% 00%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 00% 50%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 50% 99%,
		radial-gradient(circle, var(--dot-color) 0.2vmin, #0000 0) 99% 50%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 75% 80%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 80% 90%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 10% 60%,
		radial-gradient(circle, var(--dot-color) 0.2vmin, #0000 0) 31% 80%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 80% 10%,
		radial-gradient(circle, var(--dot-color) 0.2vmin, #0000 0) 90% 23%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 45% 20%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 13% 24%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 40% 50%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 43% 32%,
		radial-gradient(circle, var(--dot-color) 0.2vmin, #0000 0) 65% 55%,
		radial-gradient(circle, var(--dot-color) 0.5vmin, #0000 0) 60% 75%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 30% 65%,
		radial-gradient(circle, var(--dot-color) 0.3vmin, #0000 0) 80% 35%
		;
	/* ④ 花火の粒子が丸くなるようにサイズ調整 */
	background-size: 1vmin 1vmin;
	background-repeat: no-repeat;
	animation: firework 3s infinite;
}
.firework::before {
	transform: translate(-50%, -50%) rotate(25deg) !important; 
}
.firework::after {
	transform: translate(-50%, -50%) rotate(-37deg) !important;
}
.firework:nth-of-type(1),
.firework:nth-of-type(1)::before,
.firework:nth-of-type(1)::after {
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: yellow;
}
.firework:nth-of-type(2),
.firework:nth-of-type(2)::before,
.firework:nth-of-type(2)::after {
	top: 30%;
	left: 16%;
	animation-duration: 3.8s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: khaki;
}
.firework:nth-of-type(3),
.firework:nth-of-type(3)::before,
.firework:nth-of-type(3)::after {
	top: 10%;
	left: 72%;
	animation-duration: 4.2s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: white;
}
.firework:nth-of-type(4),
.firework:nth-of-type(4)::before,
.firework:nth-of-type(4)::after {
	top: 28%;
	left: 32%;
	animation-duration: 3.6s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: lime;
}
.firework:nth-of-type(5),
.firework:nth-of-type(5)::before,
.firework:nth-of-type(5)::after {
	top: 32%;
	left: 84%;
	animation-duration: 4.4s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: aqua;
}
.firework:nth-of-type(6),
.firework:nth-of-type(6)::before,
.firework:nth-of-type(6)::after {
	top: 38%;
	left: 40%;
	animation-duration: 4.1s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: purple;
}
.firework:nth-of-type(7),
.firework:nth-of-type(7)::before,
.firework:nth-of-type(7)::after {
	top: 28%;
	left: 64%;
	animation-duration: 3.9s;
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: pink;
}
.firework:nth-of-type(8),
.firework:nth-of-type(8)::before,
.firework:nth-of-type(8)::after {
	top: 30%;
	left: 56%;
	animation-duration: 3.9s;	
	/* ⑤ それぞれの花火の粒子の色は全て同じに */
	--dot-color: red;
}

さいごに

HTML5プロフェッショナル認定試験の勉強そっちのけでアレンジすることに夢中になりましたが楽しかったです！（現実逃避・・・）
TypeScriptのすごいキレイな花火も見つけたので次はTypeScriptをアレンジしてみようと思ってます！