Publicidad

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.

Publicidad

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:

Publicidad


Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments