Hoy presentaremos cómo usar CSS3 para completar la animación de Google Doodle. Cuando haga clic en el botón [Inicio] en la página de demostración, los corredores y caballos en la página se moverán. http://demo.cuoxin.com/js/2012/googlecs3/">css3/
Una cosa para enfatizar aquí es que IE no admite los atributos de animación de CSS3, y me quejo de la maldad, es decir, nuevamente. Pero no podemos usar esto como una razón para no abrazar CSS3.
Veamos primero el código HTML.
<! Doctype html>
<html>
<Evista>
<title> </title>
<link rel = "stylesheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</ablo>
<Body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label para = "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>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
A continuación se muestran algunos CSS.
*{margen: 0px; padding: 0px;}
#logo {posición: relativo;}
.caballo{
Ancho: 469px;
Altura: 54px;
Antecedentes: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {posición: Absolute; izquierda: 0; arriba: 0; z-índice: 1;}
#play_button {display: none;}
#play_label {
Ancho: 67px;
Altura: 54px;
Pantalla: bloque;
Posición: Absoluto;
Izquierda: 201px;
Arriba: 54px;
índice z: 2;
}
#play_image {
Posición: Absoluto;
Izquierda: 201px;
Arriba: 54px;
Índice z: 0;
desbordamiento: oculto;
Ancho: 68px;
Altura: 55px;
}
#play_image img {
Posición: Absoluto;
Izquierda: 0;
arriba: 0;
}
Esta parte del código no es demasiado difícil, por lo que no lo explicaré en detalle. Los lectores que no son muy sólidos en CSS pueden preguntarse cómo se coloca el botón [Inicio]. Puede leer el atributo de posición usted mismo para comprender la función específica de Absolute.
A continuación se muestra el efecto de página completado por los códigos HTML y CSS anteriores.
foto
Presentemos cómo producir efectos de animación. Primero debemos definir el cuadro clave, que especifica el efecto de la animación en diferentes etapas. Puede obtener más información en http://www.w3schools.com/css3/css3_animations.asp.
Creamos un plazo clave llamado Horse-Ride, y necesitamos prefijo -webkit o -moz- para Chrome y Firefox. 0% y 100% inician y terminan el código respectivamente. Puede agregar nuevos casos según sea necesario, como el efecto de animación al 50%.
@-webkit-keyframes-ride {
% {Posición de fondo: 0 0;}
% {Posición de fondo: -804px 0;}
}
@-Moz-Keyframes Horse-Ride {
% {Posición de fondo: 0 0;}
% {Posición de fondo: -804px 0;}
}
A continuación, agregaremos el efecto de animación de CSS3 para Horse.
#play_button: checked ~ .horse {
-Webkit-animation: pasos de 0.5s de paseos (12, fin) infinito;
-WebKit-Animation-Delay: 2.5s;
-Al-Animation: pasos de 0.5s de paseos (12, fin) infinito;
-Moz-Animation-Delay: 2.5s;
Posición de fondo: -2412px 0;
-WebKit-Transition: todos los 2.5s cúbicos-bezier (0.550, 0.055, 0.675, 0.190);
-Moz-Transition: todos los 2.5s cúbicos-bezier (0.550, 0.055, 0.675, 0.190);
}
Aquí primero presentamos: Checked y ~,: verificados son pseudo-clases, refiriéndose al efecto CSS cuando se selecciona #play_button, y ~ se refiere al nodo hermano de #play_button.
A continuación, presentamos los atributos CSS relacionados con .horse. En la animación, usamos 4 valores, representando: cuadro de teclado (paseos de caballos que definimos anteriormente), tiempo de intervalo de animación, efecto de animación y tiempos de ejecución. Luego establecemos el tiempo de retraso de la animación a través de Animation-Delay. Establezca la animación de transición del fondo combinando la transición y la posición de fondo.
Finalmente, agregamos efectos de animación al botón [Inicio].
#play_button: checked ~#play_image img {
Izquierda: -68px;
-WebKit-Transition: todos los 0.5s aliviados;
-Moz-Transition: todos los 0.5s en facilidad;
}
Puedes intentar desarrollarlo tú mismo.
Dirección de descarga de demostración: Google-Doodle-Animation-in-CSS3-Without-javaScript.zip Today Introduciremos cómo usar CSS3 para completar la animación de Google Doodle. Cuando haga clic en el botón [Inicio] en la página de demostración, los corredores y los caballos en la página se moverán, http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html.
Una cosa para enfatizar aquí es que IE no admite los atributos de animación de CSS3, y me quejo de la maldad, es decir, nuevamente. Pero no podemos usar esto como una razón para no abrazar CSS3.
Veamos primero el código HTML.
<! Doctype html>
<html>
<Evista>
<title> </title>
<link rel = "stylesheet" type = "text/css" href = "css/google-doodle-animation-in-css3-without-javascript.css"/>
</ablo>
<Body>
<div id = "logo">
<div>
<img src = "img/muybridge12-hp-v.png"/>
</div>
<Label para = "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>
<div> </div>
<div> </div>
<div> </div>
</div>
</body>
</html>
A continuación se muestran algunos CSS.
*{margen: 0px; padding: 0px;}
#logo {posición: relativo;}
.caballo{
Ancho: 469px;
Altura: 54px;
Antecedentes: url ('../ img/muybridge12-hp-f.jpg');
}
.frame {posición: Absolute; izquierda: 0; arriba: 0; z-índice: 1;}
#play_button {display: none;}
#play_label {
Ancho: 67px;
Altura: 54px;
Pantalla: bloque;
Posición: Absoluto;
Izquierda: 201px;
Arriba: 54px;
índice z: 2;
}
#play_image {
Posición: Absoluto;
Izquierda: 201px;
Arriba: 54px;
Índice z: 0;
desbordamiento: oculto;
Ancho: 68px;
Altura: 55px;
}
#play_image img {
Posición: Absoluto;
Izquierda: 0;
arriba: 0;
}
Esta parte del código no es demasiado difícil, por lo que no lo explicaré en detalle. Los lectores que no son muy sólidos en CSS pueden preguntarse cómo se coloca el botón [Inicio]. Puede leer el atributo de posición usted mismo para comprender la función específica de Absolute.
A continuación se muestra el efecto de página completado por los códigos HTML y CSS anteriores.
foto
Presentemos cómo producir efectos de animación. Primero debemos definir el cuadro clave, que especifica el efecto de la animación en diferentes etapas. Puede obtener más información en http://www.w3schools.com/css3/css3_animations.asp.
Creamos un plazo clave llamado Horse-Ride, y necesitamos prefijo -webkit o -moz- para Chrome y Firefox. 0% y 100% inician y terminan el código respectivamente. Puede agregar nuevos casos según sea necesario, como el efecto de animación al 50%.
@-webkit-keyframes-ride {
% {Posición de fondo: 0 0;}
% {Posición de fondo: -804px 0;}
}
@-Moz-Keyframes Horse-Ride {
% {Posición de fondo: 0 0;}
% {Posición de fondo: -804px 0;}
}
A continuación, agregaremos el efecto de animación de CSS3 para Horse.
#play_button: checked ~ .horse {
-Webkit-animation: pasos de 0.5s de paseos (12, fin) infinito;
-WebKit-Animation-Delay: 2.5s;
-Al-Animation: pasos de 0.5s de paseos (12, fin) infinito;
-Moz-Animation-Delay: 2.5s;
Posición de fondo: -2412px 0;
-WebKit-Transition: todos los 2.5s cúbicos-bezier (0.550, 0.055, 0.675, 0.190);
-Moz-Transition: todos los 2.5s cúbicos-bezier (0.550, 0.055, 0.675, 0.190);
}
Aquí primero presentamos: Checked y ~,: verificados son pseudo-clases, refiriéndose al efecto CSS cuando se selecciona #play_button, y ~ se refiere al nodo hermano de #play_button.
A continuación, presentamos los atributos CSS relacionados con .horse. En la animación, usamos 4 valores, representando: cuadro de teclado (paseos de caballos que definimos anteriormente), tiempo de intervalo de animación, efecto de animación y tiempos de ejecución. Luego establecemos el tiempo de retraso de la animación a través de Animation-Delay. Establezca la animación de transición del fondo combinando la transición y la posición de fondo.
Finalmente, agregamos efectos de animación al botón [Inicio].
#play_button: checked ~#play_image img {
Izquierda: -68px;
-WebKit-Transition: todos los 0.5s aliviados;
-Moz-Transition: todos los 0.5s en facilidad;
}
Puedes intentar desarrollarlo tú mismo.
Dirección de descarga de la demostración: http://xiazai.cuoxin.com/201212/yuanma/googlecss3_jb51.rar