- 投稿日：2021-09-11T23:03:11+09:00
CSSのみで紙吹雪を作る
タイトルの通りですが、HTML, CSSのみで紙吹雪を作りました 完成物 紙吹雪といえば四角なイメージがありますが、あえて正円で作ってみました☃️ ソースコード 構成はindex.htmlとindex.cssの2つです。以下コピペで動きます index.html <html> <head> <link rel="stylesheet" href="./index.css" type="text/css"> </head> <body> <div class="confetti__area"> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> <div class="confetti"></div> </div> </body> </html> index.css .confetti__area { position: relative; width: 400px; height: 250px; overflow: hidden; } .confetti { position: absolute; top: -28px; width: 28px; height: 28px; border-radius: 50%; } .confetti:nth-child(4n-3) { background: linear-gradient(#EBC2E7, #eb6ea5); animation: fall 4s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n-2) { background: linear-gradient(#ffd900, #fef263); animation: fall 6s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n-1) { background: linear-gradient(#03C2B1, #CAFCF6); animation: fall 5s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(4n) { background: linear-gradient(#98d98e, #68be8d); animation: fall 7s linear infinite, rotate 1.5s linear infinite; } .confetti:nth-child(1) { left: 5%; animation-delay: 0s; } .confetti:nth-child(2) { left: 10%; animation-delay: 1s; } .confetti:nth-child(3) { left: 20%; animation-delay: 2s; } .confetti:nth-child(4) { left: 25%; animation-delay: 3s; } .confetti:nth-child(5) { left: 30%; animation-delay: 1s; } .confetti:nth-child(6) { left: 40%; animation-delay: 2s; } .confetti:nth-child(7) { left: 50%; animation-delay: 3s; } .confetti:nth-child(8) { left: 55%; animation-delay: 0s; } .confetti:nth-child(9) { left: 60%; animation-delay: 2s; } .confetti:nth-child(10) { left: 75%; animation-delay: 3s; } .confetti:nth-child(11) { left: 80%; animation-delay: 1s; } .confetti:nth-child(12) { left: 90%; animation-delay: 1s; } @keyframes fall { 100% { top: 100%; } } @keyframes rotate { 100% { transform: rotateY(360deg); } } 説明 紙吹雪を降らせるエリア(confetti__area)に対して紙吹雪の高さ分だけtopをマイナス指定してoverflow: hidden;で紙吹雪を隠します index.html <div class="confetti__area"> <div class="confetti"></div> ... <div class="confetti"></div> </div> index.css .confetti__area { position: relative; width: 400px; height: 250px; overflow: hidden; } .confetti { position: absolute; top: -28px; width: 28px; height: 28px; border-radius: 50%; } overflow: hidden;を取ると紙吹雪たちがconfetti_areaの外に待機しているのが分かります 通常(紙吹雪が隠れている) overflow: hidden;を取った場合 あとはそれぞれの紙吹雪に色(background)をつけたり、落ちる速度や回転の速度(animation)、アニメーションの開始タイミング(animation-delay)や位置(left)などを指定すると完成です 終わりに 今回はシンプルに下に落ちるだけの紙吹雪を作りましたが、左右に揺れながら落としてみたり、blurをかけて奥行きを出してみたりするとより紙吹雪っぽくなるかもしれません
