こんにちは！静岡県浜松市で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をカスタマイズすれば、花びらのサイズや落下速度も調整できるので、ぜひ試してみてください！
こんなお悩みありませんか？
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
集客できるWebサイトをお求めやすい価格で制作します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
