Introducción:
En este ejemplo crearemos un gusanito rosado (litle pink worm) y lo animaremos con CSS como podemos verlo en el vídeo de abajo.
1. Creando un gusanito con CSS
Bien, lo primero que tenemos que hacer es crear una etiqueta div en HTML, ponerle tamaño y color para luego darle forma con la propiedad border.
Código HTML
<!DOCTYPE html>
<html lang="en-ES">
<head>
</head>
<body>
<div class="worm">
</body>
</html>
Código CSS
.worm{
background: #f08eae;
border: 4px solid #d5389f;
width: 50px;
height: 50px;
position: relative;
left: 0px;
margin-top: 50vh;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
Como ya tenemos la forma del cuerpo del gusanito, toca ponerle ojo, boquita y rubor para que el gusanito (worm) se vea kawaii, para ello crearemos nuevos div y luego los posicionamos y le damos una forma ovalada.
Código HTML
<div class="worm">
<div class="eye">
<div class="iris">
<div class="pupil"></div>
<div class="mouth"></div>
<div class="blush"></div>
</div>
</div>
</div>
Nota: aquí cometí un error ya que pupil e iris deberían llamarse solo pupil pero como me da flojera cambiar el HTML y CSS no hice la modificación. Además el orden no es el adecuado.
Código CSS
.eye{
width: 12px;
height: 14px;
position: relative;
background: #000;
top: 8px;
left: 4px;
border-radius: 25px;
}
.iris{
width: 6px;
height: 6px;
position: relative;
background: #fff;
top: 2px;
left: 6px;
border-radius: 25px;
}
.pupil{
width: 6px;
height: 6px;
position: relative;
background: #fff;
top: 4px;
left: -6px;
border-radius: 25px;
}
.mouth{
width: 4.5px;
height: 2.5px;
background: #000;
position: absolute;
border-radius: 9px;
margin-top: 8px;
right: 9px;
}
.blush{
width: 10px;
height: 8px;
background:#e6008c;
position: absolute;
border-radius: 9px;
margin-top: 8px;
left: 2px;
}
2. Creando la animación del gusanito en CSS
En este punto el gusanito rosa (litle pink worm) va a moverse en horizontal de derecha a izquierda en un determinado tiempo.
Y para que pueda verse más natural, mientras avanza irá encogiéndose y estirándose.
Código CSS
Añadimos la animación de nombre MoveOn la clase .worm y creamos la animación.
.worm{
animation: MoveOn 50s infinite, Worm 2s infinite;
}
@keyframes MoveOn{
0%{
margin-left: 100%;
}
48% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
margin-left: 0%;
}
98% {
transform: rotateY(180deg);
}
100%{
margin-left: 100%;
transform: rotateY(0deg);
}
}
Un detalle extra, mientras el gusanito va siguiendo el recorrido que le dimos, vamos hacer que vaya cambiando un poco de color.
En las siguientes lineas de código en CSS veremos como va cambiando de color el cuerpo y rubor del gusanito.
Código CSS
Añadiremos las siguientes animaciones a la clase .worm y .blush.
.worm{
animation: MoveOn 50s infinite, Worm 2s infinite;
}
.blush{
animation: TwoBlushes 2s infinite;
}
Aquí creamos las animaciones de:
- cambio de color del cuerpo del gusanito.
- cambio de color del rubor del gusanito.
@keyframes Worm{
0%{
background: #fca2bf;
width: 40px;
}
50%{
border-top-right-radius: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 5px;
background: #ff88af;
width: 70px;
}
100% {
background: #fca2bf;
width: 40px;
}
}
@keyframes TwoBlushes{
0%{
background:#e6008c;
}
50%{
background: #b75454;
}
100%{
background:#e6008c;
}
}
Este ejemplo no esta explicado al detalle si quieren ver el código completo y/o descargarlo clic aquí, y si desean ver este código corriendo o funcionando clic aquí.
Extra:
- Para ver una animación anterior de Tetris clic aquí ( es más cool a mi parecer).
- Para saber sobre rutas y carpetas (directorios) o archivos en HTML clic aquí.
Conclusión:
Esto es solo un código de práctica, para aprender algunas cosas de CSS, en mi caso, aprendí muchas formas de hacer un border y como crear una animación, además de como llamarla o ponerla para ver el resultado del movimiento.
