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

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

黄舟

Mar 22, 2017 pm 04:22 PM

今日は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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。