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

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

しかし ページにアニメーションの雪を置く、それが私たちからであろうとクライアントからであろうと、それは他の何よりも古いデザインの実践のように聞こえます、真実は 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グラデーションジェネレーター
ソース- デザインシャック


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメントを最初に

コメントを残す

あなたのメールアドレスが公開されることはありません。

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。