待望の新年とクリスマス休暇が近づいてきており、贈り物とお祝いの準備をする時が来ました。 そしてご存知のように、最高の贈り物はDIYの贈り物です。 :)したがって、今日はCSS3を使用してアニメーションのクリスマスカードを作成します。 このようなポストカードを作成するのに必要なのは、ほんの数分です。なぜなら、そのために使用する背景画像とCSS3アニメーションはほんのわずかだからです。
それでは始めましょう。
HTMLは非常にシンプルになります。
<!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <link rel="stylesheet" media="screen" href="style.css"> </head> <body> <div id="wrapper"> <div id="container"> <h2> !</h2> </div> </div> </body> </html>
まずはがきの背景を作成します。これにより、テーマに合った美しい写真をピックアップできます。 そして、画像が画面上で増えないように、ボディに次のスタイルを設定します。
body { background-image: url('christmas.jpg'); background-repeat: no-repeat; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; background-size: cover; }
ここでは、background-size：coverを使用して、比率を維持しながら背景が拡大縮小されるようにしました。
雪が降る効果を作成するために、 次のアイデアを使用します。このために、雪片、異なるサイズ、透明な背景を持つ3つの写真を撮ります。 必要に応じて追加できますが、ここでは「ブリザード」を発生させず、3つに制限します。 雪のある写真は、サイズが500、400、300ピクセルの正方形のPNG画像であり、前述したように背景が透明です。 雪片は、適切なブラシを使用してPhotoshopまたはGimpで描画できます。 〜Project-GimpBCのGimp GIMPスノーフレークブラシにブラシを使用しました 。 雪片をさまざまなサイズとぼかしの度合いで設定して、雪片をより自然に見せることもできます。
次に、これらの画像をラッパーブロック（div＃wrapper）に適用します。 ウィンドウの領域全体を占めるように100％の高さに設定し、htmlタグとbodyタグに同じ高さを指定することも忘れないでください。
構文によると、複数の背景画像を使用しても、背景を1つだけ使用する場合と違いはありません。唯一の違いは、背景として使用するすべての画像をコンマで区切ってリストすることです。 その結果、次の結果が得られます。
html, body { height: 100% } div#wrapper { background-image: url('snowflake1.png'), url('snowflake3.png'), url('snowflake2.png'); height:100%; }
アニメーション作成
@keyframesを使用してアニメーションを作成します。 雪のようなアニメーションの名前を設定します。 次に、2つのフレームを作成します。 最初はアニメーションの開始時にページがどのように表示されるか、2番目は最後にどのように表示されるかです。 最初は、すべての背景画像をページの左上隅に配置し、background-positionを「0px 0px」に設定しました。 次に、各画像をページ上の異なる場所に移動します。
@keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }
各ブラウザについて、ここで適切なプレフィックスを指定する必要があることに注意してください。 その結果、コードは次のようになります。
@keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} }
次のステップでは、アニメーションを表示するためのルールを設定します。 まず、使用するアニメーションの名前、この場合は「雪」、次にアニメーションの継続時間（20秒）を指定し、次にアニメーションの種類（線形）を選択します。最後に、アニメーションサイクルは無限です。
div#wrapper { background-image: url('snowflake.png'), url('snowflake3.png'), url('snowflake2.png'); height:100%; -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; }
碑文には、美しいフォントを使用できます。この例では、Google Web Fontsを使用してページに接続したLobsterフォントを使用しました。
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
そして、結果として得られたものは次のとおりです。
デモンストレーション
おわりに
だから、素敵な新年カードを手に入れましたが、残念なことに、Firefox、Chrome、Safariでしか機能しません。 IEはバージョン10でのみキーフレームのサポートを開始します;現在Operaはこのアニメーションもサポートしていません。 ただし、これで新年の挨拶の印象が損なわれないことを願っています（ただし、カードの開き方については受取人に注意する必要がありますが）。
明けましておめでとうございます！
