So verwenden Sie HTML5 und CSS3, um die Google-Graffiti-Animation fertigzustellen-H5-Tutorial-php.cn

So verwenden Sie HTML5 und CSS3, um die Google-Graffiti-Animation fertigzustellen

PHP中文网

Freigeben： 2017-03-16 13:17:42

Original

1870 Leute haben es durchsucht

Heute stellen wir Ihnen vor, wie Sie mit CSS3 die Google-Doodle-Animation vervollständigen. Wenn Sie auf der Demoseite auf die Schaltfläche [Start] klicken, bewegen sich die Reiter und Pferde auf der Seite
Eine Sache, die hier betont werden muss, ist, dass IE die Animationsattribute von CSS3 nicht unterstützt, worüber ich mich beschwere schon wieder der böse 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 vorstellen, wie Sie Animationseffekte erstellen. Zunächst müssen wir Keyframes definieren, die die Effekte der Animation in verschiedenen Phasen festlegen.
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 { 
% {background-position: 0 0;} 
% 
{background-position: -804px 0;} 
} 
@-moz-keyframes horse-ride { 
% 
{background-position: 0 0;} 
% {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 eine Pseudoklasse, die sich auf den CSS-Effekt bezieht, wenn #play_button ausgewählt ist, und ~ bezieht sich auf den Geschwisterknoten 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

Sie können versuchen, es selbst zu entwickeln.

Verwandte Artikel:

6 handgezeichnete Graffiti-Button-Effekte basierend auf reinem CSS3

Anpassbar basierend auf Javascript HTML5 Canvas Graffiti-Tafel mit Pinselfarbe/-stärke/Radiergummi

Einfache HTML5-Implementierung des Graffiti-Tafel-Beispielcodes