HTML5実践 - CSS3を使ったGoogle落書きアニメーションの完成方法を詳しく解説-H5 チュートリアル-php.cn

HTML5実践 - CSS3を使ったGoogle落書きアニメーションの完成方法を詳しく解説

黄舟

リリース： 2017-03-22 16:22:24

オリジナル

1693 人が閲覧しました

今日は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コードで完成したページ効果は以下の通りです。

それではアニメーション効果の作り方を紹介していきます。まず、さまざまな段階でのアニメーションの効果を指定するキーフレームを定義する必要があります。詳細については、http://www.w3schools.com/css3/css3_animations.asp をご覧ください。

horse-ride というキーフレームを作成しました。Chrome と Firefox の場合は、先頭に -webkit- または -moz- プレフィックスを追加する必要があります。 0% と 100% はそれぞれコードの始まりと終わりで、50% のアニメーション効果など、必要に応じて新しいケースを追加できます。

@-webkit-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {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を組み合わせて背景トランジションアニメーションを設定します。

最後に、[スタート]ボタンにアニメーション効果を追加します。

りー

以上がHTML5実践 - CSS3を使ったGoogle落書きアニメーションの完成方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。