こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトに季節感を演出したいときに、桜の花びらがひらひらと舞い落ちるアニメーションを取り入れると、一気に春らしい雰囲気を作ることができます。
今回は、CSSの@keyframesを使い、JavaScriptを使わずに桜の花びらを自然に落下させるアニメーションを実装してみます！
実際に動作するコードを掲載しているので、ぜひコピーして試してみてください。
CSSで桜の花びらをランダムに落とす
CSSの@keyframesを活用し、ランダムな位置・速さで花びらを落とすアニメーションを作ります。
【実装のポイント】
- HTMLのulタグを使って花びらをリスト形式で配置
- CSSの@keyframesで花びらを回転・移動させながら落下
- nth-child()を使って、各花びらに異なる動きを設定
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
今回は、CSSだけで桜の花びらがひらひらと落ちるアニメーションを作成しました。
@keyframesを活用すれば、JavaScriptを使わなくても、ランダムな動きのあるアニメーションを作ることができます。
ポイントまとめ
- CSSの@keyframesを活用し、自然な落下アニメーションを作成
- nth-child()で異なる動きをつけ、リアルな演出を実現
- JavaScriptなしでも、サイトの雰囲気を演出できる
このアニメーションは、春のキャンペーンページや特別演出にぴったり！
CSSをカスタマイズすれば、花びらのサイズや落下速度も調整できるので、ぜひ試してみてください！
satokotadesignキャンペーン実施中！
