CSSで雪をアニメーション化

しかし ページにアニメーションの雪を置く、それが私たちからであろうとクライアントからであろうと、それは他の何よりも古いデザインの実践のように聞こえます、真実は animación この機会に私たちが提示するのは、エレガントな海です。 また、JavaScriptは必要ありません。シンプルです。 CSS3.

まずは見てみることです アニメーション.

かなり良さそうですね。 それを実践するには、白い点でXNUMXつの画像を作成し、プロパティを使用してそれらをアニメーション化するだけです。 @キーフレーム 次のようにCSS3の：

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

別の追加 さまざまなブラウザのプレフィックス、それから私たちの体のために確立します：

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

また、必要なプレフィックスを追加します。 Joshua Johnsonの好意による詳細な説明を含む完全な手順は、彼のブログにあります。

詳しくは - CSS3グラデーションジェネレーター、CSS3グラデーションジェネレーター
ソース- デザインシャック