今日は、CSS3を使用してGoogle Doodleアニメーションを完成させる方法を紹介します。デモページの[開始]ボタンをクリックすると、ページ上のライダーと馬が移動します。 http://demo.cuoxin.com/js/2012/googlecss3/"> css3/
ここで強調すべきことの1つは、IEがCSS3のアニメーション属性をサポートしていないことであり、私は再び邪悪なIEについて不平を言っています。しかし、CSS3を受け入れない理由としてこれを使用することはできません。
最初にHTMLコードを見てみましょう。
<！doctype html>
<html>
<head>
<title> </title>
<link rel = "styleSheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<label for = "play_button" id = "play_label"> </label>
<入力型= "チェックボックス" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
以下はいくつかのCSSです。
*{マージン：0px;パディング：0px;}
#logo {position：relative;}
。馬{
幅：469px;
高さ：54px;
背景：url（ '../ img/muybridge12-hp-f.jpg'）;
}
.frame {position：absolute; left：0; top：0; z-index：1;}
#play_button {display：none;}
#play_label {
幅：67px;
高さ：54px;
表示：ブロック;
位置：絶対;
左：201px;
トップ：54px;
z-index：2;
}
#play_image {
位置：絶対;
左：201px;
トップ：54px;
z-index：0;
オーバーフロー：隠し;
幅：68px;
高さ：55px;
}
#play_image img {
位置：絶対;
左：0;
上：0;
}
コードのこの部分はそれほど難しくないので、詳細に説明しません。 CSSであまりしっかりしていない読者は、[開始]ボタンがどのように配置されているのか疑問に思うかもしれません。あなたは自分自身を自分自身で読むことができ、絶対の特定の機能を理解することができます。
以下は、上記のHTMLおよびCSSコードによって完了したページ効果です。
写真
アニメーションエフェクトを作成する方法を紹介しましょう。まず、さまざまな段階でアニメーションの効果を指定するキーフレームを定義する必要があります。 http://www.w3schools.com/css3/css3_animations.aspで詳細をご覧ください。
ChromeとFirefoxのプレフィックス-webkit-または-moz-と呼ばれるキーフレームを作成しました。それぞれ0％と100％がコードを開始および終了します。 50％のアニメーション効果など、必要に応じて新しいケースを追加できます。
@-webkit-keyframes horse-ride {
％{background-position：0 0;}
％{background -position：-804px 0;}
}
@-moz-keyframes馬に乗る{
％{background-position：0 0;}
％{background -position：-804px 0;}
}
次に、馬用のCSS3のアニメーション効果を追加します。
#play_button：checked〜.horse {
-webkit-animation：馬に乗る0.5sステップ（12、端）無限。
-webkit-animation-delay：2.5s;
-moz-alimation：馬に乗る0.5秒ステップ（12、末端）無限。
-moz-animation-delay：2.5s;
バックグラウンドポジション：-2412px 0;
-Webkit-Transition：すべての2.5キュービックベジエ（0.550、0.055、0.675、0.190）;
-moz-transition：すべての2.5キュービックベジエ（0.550、0.055、0.675、0.190）;
}
ここで最初に紹介します：checked and〜、：checkedは擬似クラスであり、#play_buttonが選択されたときのCSS効果を参照し、〜〜は#play_buttonの兄弟ノードを参照します。
次に、.Horseに関連するCSS属性を紹介します。アニメーションでは、次の4つの値を使用します。キーフレーム（上記で定義した馬に乗る）、アニメーション間隔時間、アニメーション効果、実行時間を表します。次に、アニメーション遅延時間をアニメーション遅延を設定します。トランジションとバックグラウンドポジションを組み合わせて、背景の遷移アニメーションを設定します。
最後に、[開始]ボタンにアニメーション効果を追加します。
#play_button：checked〜＃play_image img {
左：-68px;
-webkit-transition：0.5sがすべて容易になります。
-moz-transition：すべて0.5秒の容易さ。
}
あなたはそれを自分で開発しようとすることができます。
デモのダウンロードアドレス：Google-Doodle-animation-in-css3-without-javascript.zip今日は、CSS3を使用してGoogle Doodleアニメーションを完成させる方法を紹介します。デモページの[開始]ボタンをクリックすると、ページ内のライダーと馬が移動します。http：//www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。
ここで強調すべきことの1つは、IEがCSS3のアニメーション属性をサポートしていないことであり、私は再び邪悪なIEについて不平を言っています。しかし、CSS3を受け入れない理由としてこれを使用することはできません。
最初にHTMLコードを見てみましょう。
<！doctype html>
<html>
<head>
<title> </title>
<link rel = "styleSheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<label for = "play_button" id = "play_label"> </label>
<入力型= "チェックボックス" id = "play_button" name = "play_button"/>
<span id = "play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
以下はいくつかのCSSです。
*{マージン：0px;パディング：0px;}
#logo {position：relative;}
。馬{
幅：469px;
高さ：54px;
背景：url（ '../ img/muybridge12-hp-f.jpg'）;
}
.frame {position：absolute; left：0; top：0; z-index：1;}
#play_button {display：none;}
#play_label {
幅：67px;
高さ：54px;
表示：ブロック;
位置：絶対;
左：201px;
トップ：54px;
z-index：2;
}
#play_image {
位置：絶対;
左：201px;
トップ：54px;
z-index：0;
オーバーフロー：隠し;
幅：68px;
高さ：55px;
}
#play_image img {
位置：絶対;
左：0;
上：0;
}
コードのこの部分はそれほど難しくないので、詳細に説明しません。 CSSであまりしっかりしていない読者は、[開始]ボタンがどのように配置されているのか疑問に思うかもしれません。あなたは自分自身を自分自身で読むことができ、絶対の特定の機能を理解することができます。
以下は、上記のHTMLおよびCSSコードによって完了したページ効果です。
写真
アニメーションエフェクトを作成する方法を紹介しましょう。まず、さまざまな段階でアニメーションの効果を指定するキーフレームを定義する必要があります。 http://www.w3schools.com/css3/css3_animations.aspで詳細をご覧ください。
ChromeとFirefoxのプレフィックス-webkit-または-moz-と呼ばれるキーフレームを作成しました。それぞれ0％と100％がコードを開始および終了します。 50％のアニメーション効果など、必要に応じて新しいケースを追加できます。
@-webkit-keyframes horse-ride {
％{background-position：0 0;}
％{background -position：-804px 0;}
}
@-moz-keyframes馬に乗る{
％{background-position：0 0;}
％{background -position：-804px 0;}
}
次に、馬用のCSS3のアニメーション効果を追加します。
#play_button：checked〜.horse {
-webkit-animation：馬に乗る0.5sステップ（12、端）無限。
-webkit-animation-delay：2.5s;
-moz-alimation：馬に乗る0.5秒ステップ（12、末端）無限。
-moz-animation-delay：2.5s;
バックグラウンドポジション：-2412px 0;
-Webkit-Transition：すべての2.5キュービックベジエ（0.550、0.055、0.675、0.190）;
-moz-transition：すべての2.5キュービックベジエ（0.550、0.055、0.675、0.190）;
}
ここで最初に紹介します：checked and〜、：checkedは擬似クラスであり、#play_buttonが選択されたときのCSS効果を参照し、〜〜は#play_buttonの兄弟ノードを参照します。
次に、.Horseに関連するCSS属性を紹介します。アニメーションでは、次の4つの値を使用します。キーフレーム（上記で定義した馬に乗る）、アニメーション間隔時間、アニメーション効果、実行時間を表します。次に、アニメーション遅延時間をアニメーション遅延を設定します。トランジションとバックグラウンドポジションを組み合わせて、背景の遷移アニメーションを設定します。
最後に、[開始]ボタンにアニメーション効果を追加します。
#play_button：checked〜＃play_image img {
左：-68px;
-webkit-transition：0.5sがすべて容易になります。
-moz-transition：すべて0.5秒の容易さ。
}
あなたはそれを自分で開発しようとすることができます。
デモのダウンロードアドレス：http：//xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar