富山県立山町のホームページ制作会社　株式会社カポタスト

12月に入りますます寒さが厳しくなり、雪の気配が感じられるようになってきました。
というわけで、今回はCSSを使って雪を降らせる方法を考察してみました。
使うのはCSSだけで 画像ファイルは一切使用しません！図1

前述の通り、上のアニメーションですが雪には一切画像を使用していません。
CSSのradial-gradient()関数を使って雪の画像を作成し、その画像をAnimationプロパティで指定したキーフレームアニメーションで動かす、という仕組みになっております。
なお上記の例に関しては雪の大きさと配置、半透明度などをランダムに表示させるために、radial-gradient()関数の指定に関してのみJavaScriptを使用しております。

radial-gradient()関数で雪を作ろう！

radial-gradient()関数は放射状のカラーグラデーション画像を作り出すことができる関数です。
作成した画像はbackground-imageやborder-image、list-style-imageなどの画像として使用することが可能です。
関数の設定を工夫すると、グラデーション画像だけではなく、任意の大きさの円画像を作ることも可能です。
早速一つ例を見てみましょう。

radial-gradient()関数 動作例1

background-image: radial-gradient(circle at center center, 
    #81bf33 0px,
    #81bf33 50px,
    transparent 50px,
    transparent 100%);

上記は半径50pxの緑色の円を背景画像として描いたものです。
まずradial-gradient()関数の中身を1つ1つ見ていきましょう。
最初の"circle"は円を描くのに必要な記述です。
"at" で続く記述は円の中心を示しています。今回は"center center"ですので、円の中心が親画像の中心と重なるようになっています。
次の具体的なグラデーションの記述をカンマ区切りで行います。
グラデーションの記述は"色の指定"と"グラデーションの位置"にて構成されており、円の中心から順に記載していきます。
0pxから50pxまでは緑色、それ以降は透明（transparent）とすることで、円画像を作っています。
なお最後の"transparent 100%"は省略することも可能です。

radial-gradient()関数 動作例2

background-image: radial-gradient(circle at 15px 15px,
    #81bf33 0px,
    #81bf33 10px,
    transparent 10px),
radial-gradient(circle at 80px 80px, 
    #81bf33 0px, 
    #81bf33 20px, 
    transparent 20px);

background-imageが複数設定できることを利用して、今度はradial-gradient()関数にて異なる大きさの円を2つ作りました。
例1とほとんど同じですが、"at"以降に具体的な円の中心位置を指定することで、異なる場所に円を表示するようにしています。

作成した画像を繰り返し表示させる

background-size: 100px 100px;
background-repeat: repeat;

実は先ほどの円画像は100×100pxに収まる範囲で作成していました。
あらためて"background-size: 100px 100px;"と背景の範囲を指定して、"background-repeat:repeat;"とすることで、上記のように作成した画像を繰り返し表示させることができます。
本題とはずれますが、この技術を応用すればCSSだけで様々な背景パターンを作ることが出来ますね。

animationプロパティで雪を動かそう！

雪の画像を作り終えたら、今度はその画像を動かすためのキーフレームアニメーションを作成します。
具体的には背景画像の"background-position"をアニメーションさせます。

.snow{
    height: 300px;
    background-color: #010927;
    background-image: radial-gradient(circle at 10px 10px, 
        rgba(255, 255, 255, 0.5) 0px, 
        rgba(255, 255, 255, 0.5) 3px, 
        transparent 3px), 
    radial-gradient(circle at 35px 35px, 
        rgba(255, 255, 255, 0.7) 0px, 
        rgba(255, 255, 255, 0.7) 6px, 
        transparent 6px);
    background-size: 80px 80px;
    background-repeat: repeat;
    animation-name: snowing;
    animation-timing-function: linear;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
                   
@keyframes snowing {
    0% {
        background-position: 0% 0px;
    }
    50% {
        background-position: 5% 40px;
    }
    100% {
        background-position: 0% 80px;
    }
}

まずradial-gradient()関数で雪を作成します。
この例では80×80pxの範囲に2つの円（雪）が収まるように設定しています。
あとは色や半径が異なるだけで先ほどまでと同様です。
今回追加したのはanimationプロパティと対応するキーフレームアニメーションになります。
キーフレームアニメーションでは、画像のy方向のポジションを0pxから80pxまでアニメーションすることで、雪を降らす効果を出しています。
またx方向も若干動かすことで、雪がゆらゆら揺れている様子も表しています。
アニメーションの速度は"animation-duration"にて設定します。

今回は雪の数を2パターンだけ用意しましたが、その数を増やすことでさらに自然な雪のアニメーションになりますので、また試してみて下さい。
ただし雪の数（radial-gradient関数の数）が増えれば増えるほど、処理が重くなる傾向にありますので注意して下さい。

---

CSSのみで雪を作り降らせる方法、いかがでしたか？
記事中でも触れましたが今回ご紹介したradial-gradient関数は、様々な背景パターンを作ることにも利用できます。
残念ながらInternet Explorerのバージョン10以下には対応していませんが、モダンなブラウザには全て対応しておりますので、積極的に使用しても良いかも知れませんね。
また参考になれば幸いです。