HTML5とCSS3を使用してGoogle落書きアニメーションを完成させる方法-H5 チュートリアル-php.cn

HTML5とCSS3を使用してGoogle落書きアニメーションを完成させる方法

PHP中文网

リリース： 2017-03-16 13:17:42

オリジナル

1870 人が閲覧しました

今日は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(&#39;../img/muybridge12-hp-f.jpg&#39;); 
} 
.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; 
}

ログイン後にコピー

自分で開発してみることもできます。

純粋な CSS3 ベースの 6 つの手描き落書きボタン効果

JavaScript HTML5 キャンバスに基づいて調整可能ブラシの色/太さ/消しゴム付き落書きボード

落書きボードのHTML5簡易実装サンプルコード