ホームページ > 記事 > ウェブフロントエンド > HTML5とCSS3を使用してGoogle落書きアニメーションを完成させる方法
HTML5とCSS3を使用してGoogle落書きアニメーションを完成させる方法
- PHP中文网オリジナル
- 2017-03-16 13:17:421832ブラウズ
今日はcss3を使ってGoogle Doodleアニメーションを完成させる方法を紹介します。デモページの[スタート]ボタンをクリックすると、ページ上の人馬が動きます
ここで強調しておきたいのは、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> <p id="logo"> <p class="frame"> <img src="img/muybridge12-hp-v.png"/> </p> <label for="play_button" id="play_label"></label> <input type="checkbox" id="play_button" name="play_button"/> <span id="play_image"> <img src="img/muybridge12-hp-p.jpg"/> </span> <p class="horse"></p> <p class="horse"></p> <p class="horse"></p> </p> </body> </html>
以下は CSS の一部です。
*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background:
url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display:
none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}コードのこの部分はそれほど難しくないので、詳しくは説明しません。 CSS の基礎があまりしっかりしていない読者は、[スタート] ボタンがどのように配置されているのか疑問に思うかもしれません。位置属性を自分で読んで、Absolute の特定の役割を理解することができます。
以下は上記のHTMLとCSSコードで完成したページ効果です。
アニメーション効果の作成方法を紹介します。まず、さまざまな段階でのアニメーションの効果を指定するキーフレームを定義する必要があります。
horse-ride というキーフレームを作成しました。Chrome と Firefox の場合は、先頭に -webkit- または -moz- プレフィックスを追加する必要があります。 0% と 100% はそれぞれコードの始まりと終わりで、50% のアニメーション効果など、必要に応じて新しいケースを追加できます。
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
%
{background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
%
{background-position: 0 0;}
% {background-position: -804px 0;}
}次に、馬に CSS3 アニメーション効果を追加してみましょう。
#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s
steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}ここで最初に :checked と ~ を紹介します。:checked は #play_button が選択されたときの CSS 効果を参照する疑似クラスで、~ は #play_button の兄弟ノードを参照します。
次に、.horseに関するcss属性を紹介します。アニメーションでは、キーフレーム (上で定義した馬に乗る)、アニメーション間隔、アニメーション効果、実行回数を表す 4 つの値を使用します。次に、アニメーション遅延時間を介してアニメーション遅延時間を設定します。トランジションとbackground-positionを組み合わせて背景トランジションアニメーションを設定します。
最後に、[スタート]ボタンにアニメーション効果を追加します。
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition:
all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
自分で開発してみることもできます。
関連記事: