Heute werden wir vorstellen, wie Sie CSS3 verwenden, um die Google Doodle -Animation zu vervollständigen. Wenn Sie auf der Demo -Seite auf die Schaltfläche [Start] klicken, bewegen sich die Fahrer und Pferde auf der Seite. http://demo.cuoxin.com/js/2012/googlecss3/">css3/
Eine Sache, die Sie hier hervorheben sollten, ist, dass der IE die Animationsattribute von CSS3 nicht unterstützt, und ich beschwere mich über den bösen IE. Wir können dies jedoch nicht als Grund nutzen, CSS3 nicht anzunehmen.
Schauen wir uns zuerst den HTML -Code an.
<! DocType html>
<html>
<kopf>
<title> </title>
<link rel = "stylesheet" type = "text/css" href = "css/Google-Doodle-Animation-in-CSS3-without-javaScript.css"/>
</head>
<body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label für = "Play_Button" id = "Play_label"> </label>
<Eingabe type = "CheckBox" id = "Play_button" name = "Play_button"/>
<span id = "Play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Im Folgenden finden Sie einige CSS.
*{Margin: 0px; Padding: 0px;}
#Logo {Position: relativ;}
.Pferd{
Breite: 469px;
Höhe: 54px;
Hintergrund: URL ('../ img/muybridge12-hp-f.jpg');
}
.Frame {Position: absolut; links: 0; ober: 0; Z-Index: 1;}
#play_button {display: keine;}
#play_label {
Breite: 67px;
Höhe: 54px;
Anzeige: Block;
Position: absolut;
Links: 201px;
Oben: 54px;
Z-Index: 2;
}
#play_image {
Position: absolut;
Links: 201px;
Oben: 54px;
Z-Index: 0;
Überlauf: versteckt;
Breite: 68px;
Höhe: 55px;
}
#play_image img {
Position: absolut;
links: 0;
Top: 0;
}
Dieser Teil des Codes ist nicht zu schwierig, daher werde ich ihn nicht im Detail erklären. Leser, die in CSS nicht sehr solide sind, fragen sich möglicherweise, wie die [Start] -Taste positioniert ist. Sie können das Positionsattribut selbst lesen, um die spezifische Funktion des Absoluten zu verstehen.
Nachfolgend finden Sie den Seiteneffekt, der durch die oben genannten HTML- und CSS -Codes ausgeführt wird.
Bild
Lassen Sie uns vorstellen, wie Animationseffekte produziert werden. Wir müssen zunächst den Keyframe definieren, der den Effekt der Animation in verschiedenen Phasen angibt. Weitere Informationen finden Sie unter http://www.w3schools.com/css3/css3_animations.asp.
Wir haben einen Keyframe namens Horse-Ride erstellt und müssen für Chrom und Firefox-Webkit- oder -moz- und Firefox ein Präfix-Webkit- oder -moz erstellt. 0% und 100% starten und beenden den Code. Sie können nach Bedarf neue Fälle hinzufügen, z. B. den Animationseffekt bei 50%.
@-Webkit-Keyframes Horse-Ride {
% {Hintergrundposition: 0 0;}
% {Hintergrundposition: -804px 0;}
}
@-moz-keyframes Horse-Ride {
% {Hintergrundposition: 0 0;}
% {Hintergrundposition: -804px 0;}
}
Als nächstes werden wir den Animationseffekt von CSS3 für Pferd hinzufügen.
#play_button: geprüft ~ .horse {
-Webkit-Animation: Horse-Ride 0,5-Schritte (12, Ende) unendlich;
-Webkit-Animation-Delay: 2,5s;
-moz-Animation: Horse-Ride 0,5S-Schritte (12, Ende) unendlich;
-moz-Animation-Delay: 2,5s;
Hintergrundposition: -2412px 0;
-Webkit-Übergang: Alle 2,5-köpfigen Kubik-Bezier (0,550, 0,055, 0,675, 0,190);
-Moz-Übergang: Alle 2,5s Kubik-Bezier (0,550, 0,055, 0,675, 0,190);
}
Hier stellen wir zuerst vor: Checked und ~,: Checked sind Pseudoklassen, die sich auf den CSS-Effekt beziehen, wenn #play_button ausgewählt wird, und ~ bezieht sich auf den Bruder von #play_button.
Als nächstes stellen wir die CSS -Attribute vor, die sich auf .Horse beziehen. In der Animation verwenden wir 4 Werte, darstellen: Keyframe (HOSS-RIDE, das wir oben definiert haben), Animationsintervallzeit, Animationseffekt und Ausführungszeiten. Dann setzen wir die Animationsverzögerungszeit durch Animationsverzögerung. Legen Sie die Übergangsanimation des Hintergrunds durch Kombination von Übergang und Hintergrundposition fest.
Schließlich fügen wir der [Start] -Taste Animationseffekte hinzu.
#play_button: geprüft ~#Play_image img {
links: -68px;
-Webkit-Übergang: Alle 0,5s leichten in;
-Moz-Übergang: Alle 0,5 Sekunden.
}
Sie können versuchen, es selbst zu entwickeln.
Demo-Download-Adresse: Google-Doodle-Animation-in-CSS3-without-javaScript.zip heute Wir werden vorstellen, wie Sie CSS3 verwenden, um die Google Doodle-Animation zu vervollständigen. Wenn Sie auf der Demo-Seite auf die Schaltfläche [Start] klicken, bewegen sich die Fahrer und Pferde auf der Seite, http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html.
Eine Sache, die Sie hier hervorheben sollten, ist, dass der IE die Animationsattribute von CSS3 nicht unterstützt, und ich beschwere mich über den bösen IE. Wir können dies jedoch nicht als Grund nutzen, CSS3 nicht anzunehmen.
Schauen wir uns zuerst den HTML -Code an.
<! DocType html>
<html>
<kopf>
<title> </title>
<link rel = "stylesheet" type = "text/css" href = "css/Google-Doodle-Animation-in-CSS3-without-javaScript.css"/>
</head>
<body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label für = "Play_Button" id = "Play_label"> </label>
<Eingabe type = "CheckBox" id = "Play_button" name = "Play_button"/>
<span id = "Play_image">
<img src = "img/muybridge12-hp-p.jpg"/>
</span>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
Im Folgenden finden Sie einige CSS.
*{Margin: 0px; Padding: 0px;}
#Logo {Position: relativ;}
.Pferd{
Breite: 469px;
Höhe: 54px;
Hintergrund: URL ('../ img/muybridge12-hp-f.jpg');
}
.Frame {Position: absolut; links: 0; ober: 0; Z-Index: 1;}
#play_button {display: keine;}
#play_label {
Breite: 67px;
Höhe: 54px;
Anzeige: Block;
Position: absolut;
Links: 201px;
Oben: 54px;
Z-Index: 2;
}
#play_image {
Position: absolut;
Links: 201px;
Oben: 54px;
Z-Index: 0;
Überlauf: versteckt;
Breite: 68px;
Höhe: 55px;
}
#play_image img {
Position: absolut;
links: 0;
Top: 0;
}
Dieser Teil des Codes ist nicht zu schwierig, daher werde ich ihn nicht im Detail erklären. Leser, die in CSS nicht sehr solide sind, fragen sich möglicherweise, wie die [Start] -Taste positioniert ist. Sie können das Positionsattribut selbst lesen, um die spezifische Funktion des Absoluten zu verstehen.
Nachfolgend finden Sie den Seiteneffekt, der durch die oben genannten HTML- und CSS -Codes ausgeführt wird.
Bild
Lassen Sie uns vorstellen, wie Animationseffekte produziert werden. Wir müssen zunächst den Keyframe definieren, der den Effekt der Animation in verschiedenen Phasen angibt. Weitere Informationen finden Sie unter http://www.w3schools.com/css3/css3_animations.asp.
Wir haben einen Keyframe namens Horse-Ride erstellt und müssen für Chrom und Firefox-Webkit- oder -moz- und Firefox ein Präfix-Webkit- oder -moz erstellt. 0% und 100% starten und beenden den Code. Sie können nach Bedarf neue Fälle hinzufügen, z. B. den Animationseffekt bei 50%.
@-Webkit-Keyframes Horse-Ride {
% {Hintergrundposition: 0 0;}
% {Hintergrundposition: -804px 0;}
}
@-moz-keyframes Horse-Ride {
% {Hintergrundposition: 0 0;}
% {Hintergrundposition: -804px 0;}
}
Als nächstes werden wir den Animationseffekt von CSS3 für Pferd hinzufügen.
#play_button: geprüft ~ .horse {
-Webkit-Animation: Horse-Ride 0,5-Schritte (12, Ende) unendlich;
-Webkit-Animation-Delay: 2,5s;
-moz-Animation: Horse-Ride 0,5S-Schritte (12, Ende) unendlich;
-moz-Animation-Delay: 2,5s;
Hintergrundposition: -2412px 0;
-Webkit-Übergang: Alle 2,5-köpfigen Kubik-Bezier (0,550, 0,055, 0,675, 0,190);
-Moz-Übergang: Alle 2,5s Kubik-Bezier (0,550, 0,055, 0,675, 0,190);
}
Hier stellen wir zuerst vor: Checked und ~,: Checked sind Pseudoklassen, die sich auf den CSS-Effekt beziehen, wenn #play_button ausgewählt wird, und ~ bezieht sich auf den Bruder von #play_button.
Als nächstes stellen wir die CSS -Attribute vor, die sich auf .Horse beziehen. In der Animation verwenden wir 4 Werte, darstellen: Keyframe (HOSS-RIDE, das wir oben definiert haben), Animationsintervallzeit, Animationseffekt und Ausführungszeiten. Dann setzen wir die Animationsverzögerungszeit durch Animationsverzögerung. Legen Sie die Übergangsanimation des Hintergrunds durch Kombination von Übergang und Hintergrundposition fest.
Schließlich fügen wir der [Start] -Taste Animationseffekte hinzu.
#play_button: geprüft ~#Play_image img {
links: -68px;
-Webkit-Übergang: Alle 0,5s leichten in;
-Moz-Übergang: Alle 0,5 Sekunden.
}
Sie können versuchen, es selbst zu entwickeln.
Demo -Download -Adresse: http://xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar