Introducción:
Hola chicos, no he podido dejar de hacer animaciones, así que hoy les traigo otra, esta vez vamos a hacer un corazón muy bonito, el cual vamos a clonar 4 veces para luego darle 3 animaciones.
Creando corazones con CSS
En este caso lo primero que hice fue crear un elemento div llamado container (contenedor), dentro de este contenedor formaremos el corazón con 2 círculos, un cuadrado y 2 veces un cuarto de círculo para darle curva extra al corazoncito.
Programando la parte HTML
<div class="container">
<div class="col">
<div class="heart heart1">
<div class="circle"></div>
<div class="halfMoon"></div>
</div>
</div>
</div>
</div>
Bien, creo que esta parte del código amerita una explicación.
Luego de crear el contenedor, está la clase col que cumple la función de dividir el espacio en 5 columnas para que luego hayan 5 corazones en cada una. Mientras que la clase heart es un contenedor mas pequeño donde colocamos las figuras.
Por otro lado heart1 es la clase usada para establecer 2 de las animaciones. Ahora la clase circle es donde formamos las figuras de círculos y el cuadrado usando un after y un before en el CSS.
Y por ultimo la clase halfMoon es donde creamos la forma de un cuarto de círculo, como halfMoon es la base cree un .halfMoon::before y after para girarlos y darles la posición adecuada.
Programando la parte CSS
Aquí solo centraremos los contenedores y crearemos las figuras (los círculos y el cuadrado) del corazón.
.container{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
margin: 0px;
font-size: 0px;
padding: 0px;
}
.col{
display:inline-block;
width: 19%;
}
.heart{
/*content*/
width: 150px;
height: 150px;
position: relative;
top: 120vh;
z-index:-1;
}
.circle{
/*circle2*/
width:90px;
height:90px;
content:'';
background-color: crimson;
position: absolute;
margin: 35px 0px 0px 30px;
transform: rotate(-135deg);
}
.circle::after{
/*square*/
width: 90px;
height: 90px;
content:'';
background-color: crimson;
border-radius: 45px;
position: absolute;
margin: 44px 0px;
}
.circle::before{
/*circle1*/
width: 90px;
height: 90px;
content:'';
background-color: crimson;
position: absolute;
z-index: 1;
margin: 0px 44px;
border-radius: 45px;
}
.halfMoon{
background: transparent;
height: 90px;
width: 45px;
position: absolute;
border-radius: 76px 0px 0px 0px;
margin: 82px 81px;
transform: rotate(45deg);
}
.halfMoon::before{
background: black;
height: 90px;
width: 45px;
border-radius: 76px 0px 0px 0px;
content: '';
position: absolute;
margin: 45px -40px;
transform: rotate(78.5deg);
}
.halfMoon::after{
background: black;
height: 90px;
width: 45px;
border-radius: 0px 0px 0px 76px;
content: '';
margin: 3px 7px;
position: absolute;
transform: rotate(369deg);
}
Con esto ya tenemos un corazón, y faltan 4. Para crear más solo vamos a repetir un poco el código en el HTML, claro todo esto debe estar dentro del contenedor.
<div class="col"> <div class="heart heart2"> <div class="circle"></div> <div class="halfMoon"></div> </div> </div> <div class="col"> <div class="heart heart3"> <div class="circle"></div> <div class="halfMoon"></div> </div> </div> <div class="col"> <div class="heart heart4"> <div class="circle"></div> <div class="halfMoon"></div> </div> </div> <div class="col"> <div class="heart heart5"> <div class="circle"></div> <div class="halfMoon"></div> </div> </div>
Animación de los corazones en CSS
A continuación veremos las 3 animaciones creadas para darle un poco de fluidez a los corazones.
1. Movimiento vertical
En esta parte los corazones salen de la parte inferior de la pantalla (por decirlo de alguna forma) y van subiendo hasta desaparecer en distintos tiempos.
@keyframes Linear-motion{
0%{
top:100vh;
}
100%{
top:-20vh;
}
}
2. Movimiento a la izquierda
Al mismo tiempo que los corazones se mueven hacia arriba también se desplazan un poco a la izquierda y luego regresan a su posición.
@keyframes MoveLeft{
0%{
margin-left: 0%;
}
50%{
margin-left:50%;
}
100%{
margin-left: 0%;
}
}
Ahora establecemos las 2 animaciones para los 5 corazoncitos con un poco de retraso usando animation-delay, sin esto los corazones se mueven al mismo tiempo.
.heart1{
animation: 20s Linear-motion infinite,MoveLeft 23s infinite;
animation-delay: 5s;
}
.heart2{
animation: 12s Linear-motion infinite, MoveLeft 15s infinite;
animation-delay: 1s;
}
.heart3{
animation: 12s Linear-motion infinite, MoveLeft 15s infinite;
animation-delay: 18s;
}
.heart4{
animation: 16s Linear-motion infinite, MoveLeft 19s infinite;
animation-delay: 11s;
}
.heart5{
animation: 15s Linear-motion infinite, MoveLeft 18s infinite;
animation-delay: 5s;
}Cambio de color
3. Cambio de color
Aquí veremos como es que cada uno de los corazones cambian de color.
@keyframes colors{
0%{
background-color: #b30000;
}
25%{
background-color: #24248f;
}
50%{
background-color: #ff1a9f;
}
75%{
background-color: #fbd204;
}
100%{
background-color: #b30000;
}
}
Para establecer la animación de esta parte de código tuve que especificar con que corazón quería trabajar, para ello aprendí a llamar a una clase hijo. Y como el corazón tiene tres partes (círculo, círculo, cuadrado) tuve que poner la animación en cada una de ellas.
.heart.heart1 .circle{
animation: 12s colors infinite;
animation-delay: 0s;
}
.heart.heart1 .circle::before{
animation: 12s colors infinite;
animation-delay: 0s;
}
.heart.heart1 .circle::after{
animation: 12s colors infinite;
animation-delay: 0s;
}
.heart.heart2 .circle{
animation: 12s colors infinite;
animation-delay: 3s;
}
.heart.heart2 .circle::before{
animation: 12s colors infinite;
animation-delay: 3s;
}
.heart.heart2 .circle::after{
animation: 12s colors infinite;
animation-delay: 3s;
}
.heart.heart3 .circle{
animation: 12s colors infinite;
animation-delay: 6s;
}
.heart.heart3 .circle::before{
animation: 12s colors infinite;
animation-delay: 6s;
}
.heart.heart3 .circle::after{
animation: 12s colors infinite;
animation-delay: 6s;
}
.heart.heart4 .circle{
animation: 12s colors infinite;
animation-delay: 9s;
}
.heart.heart4 .circle::before{
animation: 12s colors infinite;
animation-delay: 9s;
}
.heart.heart4 .circle::after{
animation: 12s colors infinite;
animation-delay: 9s;
}
.heart.heart5 .circle{
animation: 12s colors infinite;
animation-delay: 5s;
}
.heart.heart5 .circle::before{
animation: 12s colors infinite;
animation-delay: 5s;
}
.heart.heart5 .circle::after{
animation: 12s colors infinite;
animation-delay: 5s;
}
Aquí les dejo un enlace donde pueden ver el código funcionando Heart-Animation.
Y en este otro el código para verlo o descargarlo desde github.
Eso es todo, se que es una explicación muy resumida y espero mejorar en el futuro.
Extra:
Otras animaciones:
- Muñequito (doll) – animación CSS
- Gusanito rosado (litle pink worm) – animación CSS
- Fondo animado de tetris en CSS – (CSS tetris animation)
