背景に雨が降るCSSアニメーション 3パターン
CSSで簡単に雨を降らせる事ができます！
今回は背景に雨が降るようなアニメーションをご紹介したいと思います。
JSとCSSを組み合わせて作ることが多いですが、今回はCSSのみでアニメーションを作ってみました。
初心者の方でも調整がしやすく、アレンジもできるので合わせてご紹介していきたいと思います。
一緒に雨の背景をアレンジしてみましょう♪
よく読まれている記事
ランダムにしとしと降る雨のアニメーション
背景にランダムに雨がしとしと降るようなアニメーションです。
雨が落ちるタイミングを少しずつずらすことで、ランダムに雨が降っているかのように見せることでができます。
雨と雨の感覚もランダムにすることで、より実際の雨に近いようなアニメーションになります。
背景を雨雲のような濃い青色のグラデーションにすることで、より雨の雰囲気を出すことができます。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
左から順番に降る雨のアニメーション
左側から順番に同じ感覚で雨が降るようなアニメーションです。
雨と雨の間隔を同じにすることでプログラムされたかのような雨を作ることがきます。
雨が落ちるタイミングも同じ感覚にして、アニメーションの秒数を調整するとさらに感覚を狭めることができます。
背景を雨上がりのようなオレンジ色のグラデーションにすることで、異なった印象になります。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
真ん中から外側に降る雨のアニメーション
中心から外側に向かって順番に雨が降るようなアニメーションです。
外側に開ていく感じは、何かのオープニングかのような明るい印象を与える事ができます。
シンメトリー（左右対象）に落ちて行く雨は他にも色々なパターンが作れそうですね。
背景を青とピンクの明るめのグラデーションにしているので、雨の幅を他より大きくして見やすくしています。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は自然な雨というより、プログラミングされたような雨のアニメーションをご紹介しました。
CSSで秒数や間隔を調整する事ができるので、初心者の人でも理解しやすい実装だったかと思います。
背景の色や雨の降り方をアレンジすることで異なるイメージの背景を簡単に作ることができます。
いろんな落ち方や雨の数をもっと増やしたりしていろんなアレンジをして、ぜひサイト上で実装してみてください♪
最後までご覧いただきありがとうございました☆彡