En este artículo, aprenderás cómo hacer un corazón mágico usando solo CSS. Las animaciones en CSS son una parte muy fascinante de CSS. Estaremos creando un corazón que cambia de color cada 3 segundos. Crearemos la animación en dos pasos.
1. Construyendo el corazón: En este paso construiremos la forma del corazón.
Primero crearemos dos divisiones en el cuerpo, con las clases de cuadrado y contenedor . Luego, en el archivo style.css , agregaremos un cuerpo general y un estilo de clase para que todo el contenido esté centrado. Luego crearemos dos círculos usando los selectores :before y :after y usando la propiedad border-radius para convertirlo en un círculo.
Esto creará la forma del corazón que se animará en el próximo paso. El siguiente código demuestra el código HTML y CSS.
Archivo HTML:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="square"></div> </div> </body> </html>
Archivo CSS:
CSS
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
background-color: black;
display: grid;
place-items: center;
align-items: center;
}
.square {
width: 10rem;
height: 10rem;
background-color: orange;
position: relative;
transform: rotate(45deg);
}
/* Draw one of the circles */
.square::before {
content: "";
width: 100%;
height: 100%;
background-color: green;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
}
/* Draw another of the circles */
.square::after {
content: "";
width: 100%;
height: 100%;
background-color: pink;
position: absolute;
border-radius: 50%;
transform: translateX(-50%);
}
Nota: A partir de ahora, se utilizan dos colores diferentes para dibujar los círculos, para que puedas entenderlo mejor, pero en el programa final, usaremos el mismo color para los dos círculos y el cuadrado.
Producción:
Podemos hacer círculos de diferentes colores para que se distingan fácilmente. Si hacemos que todos los colores sean iguales, el resultado sería el siguiente:
2. Animando el corazón: En este paso agregamos las animaciones del corazón.
Usaremos dos conjuntos de animación para el corazón. Uno es el movimiento del corazón y el otro es el cambio de colores. Usaremos fotogramas clave para definir las animaciones. Los colores del corazón se definirán en cada uno de los fotogramas clave según sea necesario. Esto alternará los colores del corazón a lo largo de la animación.
El movimiento del corazón al cambiar de un cuadrado al corazón se puede agregar utilizando la propiedad de transformación en uno de los fotogramas clave. Esto provocará la transformación de un cuadrado a la forma de un corazón.
Programa Completo
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
background-color: black;
display: grid;
place-items: center;
align-items: center;
}
.square {
width: 10rem;
height: 10rem;
background-color: pink;
position: relative;
transform: rotate(45deg);
animation: beater 3s linear infinite;
}
.square::before {
content: "";
width: 100%;
height: 100%;
background-color: pink;
position: absolute;
border-radius: 50%;
transform: translateY(-50%);
animation: beater 3s linear infinite;
}
.square::after {
content: "";
width: 100%;
height: 100%;
background-color: pink;
position: absolute;
border-radius: 50%;
transform: translateX(-50%);
animation: beater 3s linear infinite;
}
/* Define the keyframes for the animation */
@keyframes beater {
0% {
background: red;
}
15% {
background: orange;
}
30% {
transform: scale(0.5);
background: yellow;
}
45% {
background: greenyellow;
}
60% {
background: blue;
}
75% {
background: indigo;
}
100% {
background: violet;
}
}
</style>
</head>
<body>
<div class="container">
<div class="square"></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por anshitaagarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA