Zenn
🎆

HTMLとCSSだけで花火をつくる【canvas/JavaScript不使用】

2022/08/06に公開
CSS
HTML
コーディング
tech

夏ですね！
夏といえば花火！
ということで、HTMLとCSSで花火をつくります。

実際につくる花火はこんな感じ。
デモサイトはこちら

HTMLとCSSでつくる花火

この花火のHTML/CSSを応用すれば、こんな感じにもできました。
デモサイトはこちら

HTMLとCSSでつくる花火

Twitterでもそこそこ反響あって嬉しい…！

https://twitter.com/yurukei20/status/1555695487524958209?s=20&t=DrOxnxR2I9WwwtH5kNrGvA

以下からソースコードを書いていきますー。

ソースコード

canvasはあまり扱えないので、今回はHTMLとCSSだけでつくります。
その分、若干しょぼくなりましたが…。

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

body {
	background: #000;
}

@keyframes fireworks-animation {
	0% {
		transform: translate(-50%, 90vh);
		width: 4px;
		opacity: 1;
	}
	50% {
		width: 4px;
		opacity: 1;
	}
	100% {
		width: 400px;
		opacity: 0;
	}
}

.c-firework,
.c-firework::before,
.c-firework::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	background: radial-gradient(circle, #ff0 10px, #000 0) 50% 00%,
		radial-gradient(circle, #ff0 10px, #000 0) 00% 50%,
		radial-gradient(circle, #ff0 10px, #000 0) 50% 99%,
		radial-gradient(circle, #ff0 10px, #000 0) 99% 50%,
		radial-gradient(circle, #ff0 10px, #000 0) 80% 90%,
		radial-gradient(circle, #ff0 10px, #000 0) 95% 90%,
		radial-gradient(circle, #ff0 10px, #000 0) 10% 60%,
		radial-gradient(circle, #ff0 10px, #000 0) 31% 80%,
		radial-gradient(circle, #ff0 10px, #000 0) 80% 10%,
		radial-gradient(circle, #ff0 10px, #000 0) 90% 23%,
		radial-gradient(circle, #ff0 10px, #000 0) 45% 20%,
		radial-gradient(circle, #ff0 10px, #000 0) 13% 24%;
	background-size: 4px 4px;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%);
	animation: fireworks-animation 4s infinite;
}
.c-firework::before {
	transform: translate(-50%, -50%) rotate(25deg) !important;
}
.c-firework::after {
	transform: translate(-50%, -50%) rotate(-37deg) !important;
}

transformを使って下から上に動かせて、opacityで花火の点滅、widthで花火の広がり、background-colorで花火の色の調整ができます。

応用パターン

このコードを応用すれば、複数の花火をランダムに打ち上げることができます。
複数の花火は位置座標とアニメーション速度をいい感じに調整したらOKです。
デモサイト

HTMLとCSSでつくる花火

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

body {
	background: #000;
}

@keyframes fireworks-animation {
	0% {
		transform: translate(-50%, 90vh);
		width: 4px;
		opacity: 1;
	}
	50% {
		width: 4px;
		opacity: 1;
	}
	100% {
		width: 600px;
		opacity: 0;
	}
}

.c-firework,
.c-firework::before,
.c-firework::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	background: radial-gradient(circle, yellow 10px, #000 0) 50% 00%,
		radial-gradient(circle, khaki 10px, #000 0) 00% 50%,
		radial-gradient(circle, white 10px, #000 0) 50% 99%,
		radial-gradient(circle, lime 10px, #000 0) 99% 50%,
		radial-gradient(circle, crimson 10px, #000 0) 80% 90%,
		radial-gradient(circle, red 10px, #000 0) 95% 90%,
		radial-gradient(circle, yellow 10px, #000 0) 10% 60%,
		radial-gradient(circle, khaki 10px, #000 0) 31% 80%,
		radial-gradient(circle, white 10px, #000 0) 80% 10%,
		radial-gradient(circle, lime 10px, #000 0) 90% 23%,
		radial-gradient(circle, crimson 10px, #000 0) 45% 20%,
		radial-gradient(circle, red 10px, #000 0) 13% 24%;
	background-size: 8px 8px;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%);
	animation: fireworks-animation 4s infinite;
}
.c-firework::before {
	transform: translate(-50%, -50%) rotate(25deg) !important;
}
.c-firework::after {
	transform: translate(-50%, -50%) rotate(-37deg) !important;
}

.c-firework:nth-of-type(2),
.c-firework:nth-of-type(2)::before,
.c-firework:nth-of-type(2)::after {
	top: 30%;
	left: 16%;
	animation-duration: 3.8s;
}
.c-firework:nth-of-type(3),
.c-firework:nth-of-type(3)::before,
.c-firework:nth-of-type(3)::after {
	top: 10%;
	left: 72%;
	animation-duration: 4.2s;
}
.c-firework:nth-of-type(4),
.c-firework:nth-of-type(4)::before,
.c-firework:nth-of-type(4)::after {
	top: 28%;
	left: 32%;
	animation-duration: 3.6s;
}
.c-firework:nth-of-type(5),
.c-firework:nth-of-type(5)::before,
.c-firework:nth-of-type(5)::after {
	top: 32%;
	left: 84%;
	animation-duration: 4.4s;
}
.c-firework:nth-of-type(6),
.c-firework:nth-of-type(6)::before,
.c-firework:nth-of-type(6)::after {
	top: 38%;
	left: 40%;
	animation-duration: 4.1s;
}
.c-firework:nth-of-type(7),
.c-firework:nth-of-type(7)::before,
.c-firework:nth-of-type(7)::after {
	top: 28%;
	left: 64%;
	animation-duration: 3.9s;
}
.c-firework:nth-of-type(8),
.c-firework:nth-of-type(8)::before,
.c-firework:nth-of-type(8)::after {
	top: 30%;
	left: 56%;
	animation-duration: 3.9s;
}

最後に

ということで、画面上でも花火を楽しみましょうー。
それでは。👋

ちなみに以下のCodepenを参考にしました。

https://codepen.io/alvaromontoro/pen/QWQWjrj

Discussion