Ausführliche HTML5-Übungserklärung zur Vervollständigung der Google-Graffiti-Animation mit CSS3-H5-Tutorial-php.cn

Ausführliche HTML5-Übungserklärung zur Vervollständigung der Google-Graffiti-Animation mit CSS3

黄舟

Freigeben： 2017-03-22 16:22:24

Original

1695 Leute haben es durchsucht

Heute stellen wir Ihnen vor, wie Sie mit CSS3 eine Google-Graffiti-Animation vervollständigen. Wenn Sie auf der Demoseite auf die Schaltfläche [Start] klicken, werden die Reiter und Pferde auf der Seite verschoben.

Eine Sache, die hier betont werden muss, ist, dass IE die Animationsattribute von CSS3 I nicht unterstützt Ich beschwere mich wieder über den bösen IE. Aber wir können dies nicht als Grund nutzen, CSS3 nicht zu akzeptieren.

Schauen wir uns zunächst den HTML-Code an.

<!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>

Nach dem Login kopieren

Das Folgende ist Teil des 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;
}

Nach dem Login kopieren

Dieser Teil des Codes ist nicht allzu schwierig, daher werde ich ihn nicht im Detail erklären. Leser, die nicht über sehr solide CSS-Kenntnisse verfügen, fragen sich möglicherweise, wie die Schaltfläche [Start] positioniert ist. Sie können das Positionsattribut selbst lesen, um die spezifische Rolle des Absoluten zu verstehen.

Das Folgende ist der Seiteneffekt, der durch den obigen HTML- und CSS-Code vervollständigt wird.

Lassen Sie uns nun vorstellen, wie man Animationseffekte erzeugt. Zunächst müssen wir Keyframes definieren, die die Effekte der Animation in verschiedenen Phasen festlegen. Weitere Informationen finden Sie unter http://www.w3schools.com/css3/css3_animations.asp.

Wir haben einen Keyframe namens horse-ride erstellt. Für Chrome und Firefox müssen Sie das Präfix -webkit- oder -moz- hinzufügen. 0 % und 100 % sind der Anfang bzw. das Ende des Codes. Bei Bedarf können neue Fälle hinzugefügt werden, beispielsweise der Animationseffekt bei 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;}
}

Nach dem Login kopieren

Als Nächstes fügen wir dem Pferd CSS3-Animationseffekte hinzu.

#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);
}

Nach dem Login kopieren

Hier stellen wir zunächst :checked und ~ vor. :checked ist die Pseudoklasse , die sich auf den CSS-Effekt bezieht, wenn #play_button ausgewählt ist, und ~ sich auf die Geschwister bezieht Knoten von #play_button.

Als nächstes stellen wir die CSS-Attribute im Zusammenhang mit .horse vor. Wir verwenden in der Animation 4 Werte, die Folgendes darstellen: Keyframe (Pferderitt, den wir oben definiert haben), Animationsintervall, Animationseffekt und Ausführungsnummer. Dann stellen wir die Animationsverzögerungszeit über Animationsverzögerung ein. Legen Sie die Hintergrundübergangsanimation fest, indem Sie Übergang und Hintergrundposition kombinieren.

Zuletzt fügen wir der Schaltfläche [Start] Animationseffekte hinzu.

#play_button:checked ~#play_image img{
    left:-68px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
}

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche HTML5-Übungserklärung zur Vervollständigung der Google-Graffiti-Animation mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!