こんにちわ!最近花粉の気配を感じ始めましたね・・・。 なんだかんだでもう3月に入りましたが、もう少しで桜の季節です! ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。 用意するもの ●桜の花びら画像(png) 桜の花びら画像を7枚( 7パターン)用意しました。 出来上がりがこちら See the Pen GRNYVxq by adatype (@adatype) on CodePen. 出来上がったものがこちらになります。 コードの内容については下記をご覧ください。 まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。 用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所
![舞い散る桜の花びらアニメーション【HTML/CSS】](https://cdn-ak-scissors.b.st-hatena.com/image/square/38701e7411052a76fa29bf36ca8f7cd4bd6e87b9/height=288;version=1;width=512/https%3A%2F%2Fadatype.co.jp%2Finfo%2Fwp-content%2Fuploads%2F2021%2F03%2Fa11b4bb3ba448d1fa402ac3dc62cc91f.jpg)