Ya presenté cómo dibujar caras con HTML + CSS simple y también hemos aprendido sobre la animación de los fotogramas clave de CSS . Combinemos estos dos y creemos una cara en movimiento continuo con ojos parpadeantes mirando alrededor y con una boca sonriente. ¡Hagamos esto usando nada más que un simple CSS3 HTML5!
Vea el dibujo en vivo en la página de inicio de HTML CSS JavaScript o edite el código en JSFiddle .
Necesitamos construir primero la estructura de la cabeza. Usamos un div para la cabeza con un borde negro redondeado y un fondo blanco. Esto envolverá los dos ojos con los párpados y las pupilas dentro de ellos. Finalmente le añadimos la boca. Este será un div vacío con un borde inferior con bordes redondeados creando la ilusión de una boca sonriente.
El código HTML
Ahora tenemos el esqueleto HTML de Bob (porque por eso lo llamo).
< div id = "cssHead" >
< div class = "cssEye leftEye" >
< div class = "cssEyeLid" >
< div class = "cssPupil" >
</ div >
</ div >
</ div >
< div class = " cssEye rightEye " >
< div class = " cssEyeLid " >
<div class = "cssPupil" >
</div >
</ div >
</ div >
< div class = "cssMouth" >
</ div >
</ div >
Diseñando los divs para que parezcan una cabeza.
Para aquellos que tienen experiencia con el estilo CSS, esto no debería ser un gran problema. Es posible que desee crear sus propios diseños. Así es como estilé a Bob:
#cssHead {
margen : 20 px auto ;
ancho : 180 px ;
color de fondo : #fff ;
altura : 180 px ;
-webkit- radio-borde : 500 px ;
radio del borde : 500 px ;
borde : 3 px sólido # 000 ;
-moz-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados );
-webkit-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados );
-o-transformada: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados );
-ms-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados );
transformar: girar ( -2 grados ) sesgo ( -3 grados , -2 grados );
}
.cssEye {
display : inline-block ;
}
.cssPupil {
ancho : 12 px ;
fondo : # 000 ;
altura : 12 px ;
margen : 6 px 0 px 3 px 8 px ;
-webkit- radio-borde : 20 px ;
radio del borde : 20 px ;
}
.cssEyeLid {
border : 1 px solid # 000 ;
-webkit- radio-borde : 20 px ;
radio del borde : 20 px ;
desbordamiento : oculto ;
altura : 20 px ;
margen : 0 ;
}
.htmlEye {
border : 1 px solid # 000 ;
pantalla : bloque en línea ;
-webkit- radio-borde : 20 px ;
radio del borde : 20 px ;
}
.wraphtmlEye {
background-color : #DDD ;
margen : 6 px ;
Relleno : 4 px ;
ancho : 25 px ;
altura : 25 px ;
}
.htmlPupil {
ancho : 12 px ;
fondo : # 000 ;
altura : 12 px ;
margen : 6 px 4 px 3 px ;
-webkit- radio-borde : 20 px ;
radio del borde : 20 px ;
}
.rightEye {
margen : 0 ;
}
.leftEye {
margen : 50 px 4 px 0 px 66 px ;
}
.cssMouth {
border-top : none ;
borde derecho : ninguno ;
borde izquierdo : ninguno ;
borde inferior : 4 px sólido # 000 ;
-webkit- radio-borde : 100 px ;
radio del borde : 100 px ;
altura : 20 px ;
ancho : 45 px ;
margen : 0 px auto 0 ;
}
Creo que no hay mucho que explicar sobre el código. No es un gran problema, solo algunas fronteras alrededor de divs posicionados.
Animación CSS3 usando fotogramas clave
Los estilos anteriores no harán que Bob se mueva, también tenemos que configurar las animaciones. Estoy configurando movimientos que se repiten cíclicamente para mover la cabeza, mover las pupilas, parpadear y mover la boca. Establecí varias duraciones de ciclo para cada efecto para evitar la ilusión de repetición.
Animando la cabeza
Establecí un ciclo de 10 segundos y durante esta cabeza de Bob, el elemento div que envuelve los ojos y la boca pasa por varias rotaciones.
/ *
Inicio de la animación de CSS * / #cssHead {
-webkit-animation: headRotations 10 s infinito;
Animación: headRotations 10 s infinito;
}
@ -webkit-keyframes headRotations {
0% {-webkit-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
20% {-webkit-transform: rotar ( 2 grados ) sesgo ( -3 grados , -2 grados ); }
25% de {-webkit-transform: rotar ( -4 grados ) sesgo ( -3 grados , -2 grados ); }
28% de {-webkit-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
40% de {-webkit-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
50% de {-webkit-transform: rotar ( 2 grados ) sesgo ( -3 grados , -2 grados ); }
60% {-webkit-transform: rotar ( -6 grados ) sesgo ( -3 grados , -2 grados ); }
70% {-webkit-transform: rotar ( 6 grados ) sesgo ( -3 grados , -2 grados ); }
90% de {-webkit-transform: rotar ( 6 grados ) sesgo ( -3 grados , -2 grados ); }
100% {-webkit-transform: rotar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
}
@keyframes headRotations {
0% {transformar: girar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
20% {transformar: girar ( 2 grados ) sesgo ( -3 grados , -2 grados ); }
25% {transformar: girar ( -4 grados ) sesgo ( -3 grados , -2 grados ); }
28% {transformar: girar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
40% {transformar: girar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
50% {transformar: girar ( 2 grados ) sesgo ( -3 grados , -2 grados ); }
60% {transformar: girar ( -6 grados ) sesgo ( -3 grados , -2 grados ); }
70% {transformar: girar ( 6 grados ) sesgo ( -3 grados , -2 grados ); }
90% {transformar: girar ( 6 grados ) sesgo ( -3 grados , -2 grados ); }
100% {transformar: girar ( -2 grados ) sesgo ( -3 grados , -2 grados ); }
}
/ * CSS encabezado de animación *
Animación de ojos
El ojo tiene un efecto de parpadeo y está continuamente mirando alrededor. Para crear la ilusión de explorar, muevo a las dos pupilas juntas para evitar entrecerrar los ojos.
El efecto de parpadeo se realiza reduciendo la altura de los párpados a 0. El párpado es la división que contiene las pupilas.
/ *
COMIENZA la animación de los alumnos de CSS * / .cssPupil {
-webkit-animation: buscando alrededor de 20 s infinito;
Animación: buscando alrededor de 20 s infinito;
}
@ -webkit-keyframes lookingAround {
0% { margen : 6 px 0 px 3 px 8 px ; }
10% { margen : 6 px 0 px 3 px 8 px ; }
12% { margen : 6 px 8 px 3 px 0 px ; }
27% { margen : 6 px 8 px 3 px 0 px ; }
30% { margen : 6 px 0 px 3 px 8 px ; }
40% { margen : 6 px 0 px 3 px 8 px ; }
43% { margen : 1 px 0 px 8 px 8 px ; }
46% { margen : 6 px 0 px 3 px 8 px ; }
57% { margen : 6 px 0 px 3 px 8 px ; }
60% { margen : 6 px 8 px 3 px 0 px ; }
63% { margen : 6 px 0 px 3 px 8 px ; }
77% { margen : 6 px 0 px 3 px 8 px ; }
80% { margen : 6 px 4 px 3 px 4 px ; }
85% { margen : 6 px 4 px 3 px 4 px ; }
88% { margen : 6 px 0 px 3 px 8 px ; }
92% { margen : 6 px 0 px 3 px 8 px ; }
100% { margen : 6 px 0 px 3 px 8 px ; }
}
@keyframes lookingAround {
0% { margen : 6 px 0 px 3 px 8 px ; }
10% { margen : 6 px 0 px 3 px 8 px ; }
12% { margen : 6 px 8 px 3 px 0 px ; }
27% { margen : 6 px 8 px 3 px 0 px ; }
30% { margen : 6 px 0 px 3 px 8 px ; }
40% { margen : 6 px 0 px 3 px 8 px ; }
43% { margen : 1 px 0 px 8 px 8 px ; }
46% { margen : 6 px 0 px 3 px 8 px ; }
57% { margen : 6 px 0 px 3 px 8 px ; }
60% { margen : 6 px 8 px 3 px 0 px ; }
63% { margen : 6 px 0 px 3 px 8 px ; }
77% { margen : 6 px 0 px 3 px 8 px ; }
80% { margen : 6 px 4 px 3 px 4 px ; }
85% { margen : 6 px 4 px 3 px 4 px ; }
88% { margen : 6 px 0 px 3 px 8 px ; }
92% { margen : 6 px 0 px 3 px 8 px ; }
100% { margen : 6 px 0 px 3 px 8 px ; }
}
/ * CSS alumnos animación FIN * /
/ * CSS parpadea
COMIENZO * / .cssEyeLid {
-webkit-animation: blinkingEye 7 s infinite;
Animación: BlinkingEye 7 s infinite;
}
@ -webkit-fotogramas clave parpadeandoEye {
0% { altura : 20 px ; margen : 0 ; }
58% { altura : 20 px ; margen : 0 ; }
60% { altura : 0 px ; margen : 10 px 0 ; }
66% { altura : 20 px ; margen : 0 ; }
100% { altura : 20 px ; margen : 0 ; }
}
@keyframes parpadeandoEye {
0% { altura : 20 px ; margen : 0 ; }
58% { altura : 20 px ; margen : 0 ; }
60% { altura : 0 px ; margen : 10 px 0 ; }
66% { altura : 20 px ; margen : 0 ; }
100% { altura : 20 px ; margen : 0 ; }
}
/ * CSS parpadeando FIN * /
La boca
Nuestro personaje de dibujo CSS necesita una boca para sonreír. El efecto se crea al reducir el borde inferior de la abertura de la boca a un tamaño más pequeño y luego a la medida y posición iniciales
/ * CSS sonriendo animación
COMIENZA * / .cssMouth {
-webkit-animation: smilingMouth 8 s infinito;
Animación: sonreír la boca 8 s infinita;
}
@ -webkit-keyframes smilingMouth {
0% { altura : 20 px ; borde inferior : 3 px sólido # 000 ; margen : 0 px auto 0 ; }
20% { altura : 35 px ; borde inferior : 6 px sólido # 000 ; margen : -10 px auto 0 ; }
80% { altura : 35 px ; borde inferior : 6 px sólido # 000 ; margen : -10 px auto 0 ; }
100% { altura : 20 px ; borde inferior : 3 px sólido # 000 ; margen : 0 px auto 0 ; }
}
@keyframes smilingMouth {
0% { altura : 20 px ; borde inferior : 3 px sólido # 000 ; margen : 0 px auto 0 ; }
20% { altura : 35 px ; borde inferior : 6 px sólido # 000 ; margen : -10 px auto 0 ; }
80% { altura : 35 px ; borde inferior : 6 px sólido # 000 ; margen : -10 px auto 0 ; }
100% { altura : 20 px ; borde inferior : 3 px sólido # 000 ; margen : 0 px auto 0 ; }
}
/ * CSS sonriendo animación FIN * /
Tenga en cuenta que en cada ciclo de animación, el último fotograma (100%) vuelve al estado inicial (0%) para evitar saltar.