Heim > Artikel > Web-Frontend > Ausführliche HTML5-Übungserklärung zur Vervollständigung der Google-Graffiti-Animation mit CSS3

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

黄舟Original: 2017-03-22 16:22:241613Durchsuche

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>

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

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

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

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte HTML5-Code-Erklärung zur Verwendung von CSS zum Erstellen von Dreiecken und zur Verwendung von CSS3 zum Erstellen von 3D-TetraedernNächster Artikel：Detaillierte HTML5-Code-Erklärung zur Verwendung von CSS zum Erstellen von Dreiecken und zur Verwendung von CSS3 zum Erstellen von 3D-Tetraedern

In Verbindung stehende Artikel

Mehr sehen