Este artículo le enseñará acerca de la animación HTML y CSS ampliamente fascinada y utilizada, es decir, Pulsating Heart Animation . En este artículo, básicamente aprenderemos dos métodos para implementar la animación. Esta animación es beneficiosa al hacer el pie de página de la mayoría de los sitios web con algún texto común como Made with Love . Entonces, primero echemos un vistazo a la animación:
Animación de corazón pulsante
Método 1 (desde cero): en este método, realizaremos esta animación en dos pasos:
- Construyendo el corazón
- Animando el pulso del corazón
1. Construyendo el corazón: A continuación se muestra el archivo HTML estructural básico.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "heart"></div> </body> </html>
A continuación se muestra el archivo CSS llamado style.css para estilo y animación.
style.css
body {
display:flex;
align-items: center;
justify-content: center;
min-height:100vh;
margin: 0;
background-color: lightcoral;
}
.heart {
background: red;
position: relative;
height: 100px;
width:100px;
/* Animation */
transform: rotate(-45deg) scale(1);
animation: pulse 2s linear infinite;
}
.heart::after {
/* background:blue; */
background:inherit;
border-radius: 50%; /* To make circle */
content:'';
position:absolute;
/* top: -100px;*/
top: -50%; /* Inherit properties of parent */
/* left: -100px; */
left:0;
height: 100px;
width:100px;
}
.heart::before {
/* background:green; */
background:inherit;
border-radius: 50%; /* To make circle */
content:'';
position:absolute;
top:0;
right:-50%; /* Inherit properties of parent */
height: 100px;
width:100px;
}
@keyframes pulse{
0% {
transform: rotate(-45deg) scale(1);
opacity: 0;
}/*
10% {
transform: rotate(-45deg) scale(1.3);
}
20% {
transform: rotate(-45deg) scale(0.9);
}
30% {
transform: rotate(-45deg) scale(1.2);
}
40% {
transform: rotate(-45deg) scale(0.9);
}*/
50% {
transform: rotate(-45deg) scale(1.3);
opacity: 1;
}/*
60% {
transform: rotate(-45deg) scale(0.95);
}
70% {
transform: rotate(-45deg) scale(1);
} */
100% {
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
Nota: Después de combinar y ejecutar con éxito el código, dará el resultado deseado.
Explicación: Primero hemos creado una división en el cuerpo de la página web con corazón de clase. Luego, en el archivo style.css, hicimos un estilo general de cuerpo y clase para tomar todo el contenido en el centro del cuerpo. Ahora básicamente entendamos cómo haremos el corazón. Haremos un corazón con la ayuda del bloque que hemos creado a través del estilo básico antes, luego a través de los efectos de antes y después, así como el concepto de posición absoluta y relativa. Crearemos dos círculos, para una mejor comprensión, puede cambiar los colores como azul y verde respectivamente en los efectos posteriores y anteriores de la clase de corazón sin transformarlos. Se verá como las siguientes figuras:
Después de colocar círculos y bloques antes de rotar
Antes de colocar círculos y bloques
Entonces, como puede ver después del posicionamiento, es algo que parece ser un corazón, pero solo de una manera inclinada. Tenga en cuenta que mantenga el mismo color del bloque y ambos círculos para obtener el efecto requerido . Estos colores solo fueron elegidos para una mejor comprensión. Ahora, de nuevo, qué hacer con un corazón inclinado, hagámoslo recto transformándolo y girándolo en el sentido de las agujas del reloj a -45 grados. Ahí obtienes un corazón rojo recto con un fondo rosado.
2. Animando el pulso del corazón: Vayamos ahora a nuestro segundo paso. Introduzcamos una animación de pulso en clase de corazón de una duración de aproximadamente 1-2 segundos con iteraciones lineales infinitas. Luego, aplicaremos ciertos fotogramas clave para crear el corazón pulsante animado requerido con un cambio en la escala de transformación y también en la opacidad.
Conceptos Utilizados:
1. Relacionados con el Posicionamiento:
- absoluto: un elemento se coloca en relación con el elemento principal posicionado más cercano. Uno usa los atributos de posicionamiento arriba, izquierda, abajo y derecha para establecer la ubicación.
- relativo: un elemento se coloca en relación con su posición normal. Si establece la posición: relativo; de un elemento pero ningún otro atributo de posicionamiento (arriba, izquierda, abajo o derecha), no tendrá ningún efecto en su posicionamiento. Pero si uno le da algún otro atributo de posicionamiento, digamos, derecha: 20px;, cambiará su posición 20 píxeles a la izquierda de donde estaría normalmente.
2. Efectos After y Before:::before y ::after son los pseudo-elementos en CSS que le permiten insertar contenido en una página sin necesidad de que esté en el HTML .
3. Acerca de la animación y herencia:
Sintaxis:
animation: <animation name> <animation duration> <animation-timing function> <animation-iteration-count>
Hay muchas otras subpropiedades en las que podemos usar el efecto de animación. La propiedad de animación en CSS se puede usar para animar muchas otras propiedades de CSS, como bordes, formas, color de fondo, altura o ancho. Cada animación debe definirse con @keyframes o mecanismo de cómo funcionará la animación y qué propiedades seguir.
También hemos usado la propiedad de herencia en el color de fondo en nuestro ejemplo, ya que la clase de corazón es padre y corazón::después y corazón::antes son clases secundarias que han heredado el color de fondo usado en el padre.
4. Acerca de los fotogramas clave:
Sintaxis:
@keyframes <animation name>
Cada regla @keyframes define lo que debería suceder en momentos específicos durante la animación. Por ejemplo, 0 % es el comienzo de la animación, 50 % es la mitad de la duración de la animación y 100 % es el final de la animación.
5. Acerca de la rotación, la escala y la opacidad:
Sintaxis:
transform: rotate (<angle>) scale(<value>)
La cantidad de rotación creada por la función de rotate() se especifica mediante un <ángulo>. Si es positivo, el movimiento será en el sentido de las agujas del reloj, de lo contrario, será en el sentido contrario a las agujas del reloj. Una rotación de 180° se llama reflexión puntual. En nuestro ejemplo, hemos girado ese corazón inclinado alrededor de la línea y=x en el sentido contrario a las agujas del reloj para que quede recto.
La función scale() se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.
Sintaxis:
scale(x, y). Default value is 1
La propiedad de opacidad en CSS especifica qué tan transparente es un elemento. El valor predeterminado es 1, significa que el elemento es opaco en esa duración y visible también. Los valores van de 0 a 1 y representan la opacidad del elemento.
Método 2: En este método, seguiremos dos pasos que seguimos en el Método 1 que son construir el corazón y animarlo con pulso.
1. Construyendo el corazón: No construiremos el corazón desde cero. Solo tiene que tomar el código HTML y CSS del icono de diferentes sitios web gratuitos. Recomendaremos iconos de Bootstrap Font Awesome . Luego solo tienes que aplicar ese código en la parte HTML de nuestra animación así:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel = "stylesheet" href = "style.css"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity= "sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> </head> <body> <div> <i class="fas fa-heart" aria-hidden="true"></i> </div> </body> </html>
Puede aplicar CSS de la siguiente manera con el nombre del archivo como style.css:
style.css
/* General Styling */
body {
display:flex;
align-items: center;
justify-content: center;
min-height:100vh;
margin: 0;
background: lightcoral;
}
/* Styling Heart */
.fa-heart {
color: red;
font-size: 250px;
height: 100px;
width:100px;
/* Animating heart */
animation: pulse 1s linear infinite;
}
@keyframes pulse {
0%{
transform: scale(1);
opacity: 0;
}
50%{
transform: scale(1.3);
opacity:1;
}
100%{
transform: scale(1);
opacity:0;
}
}
Nota: Después de combinar y ejecutar con éxito el código, dará el resultado deseado.
Después de solo el estilo general del cuerpo y la clase de icono, obtendrá un corazón en el centro del cuerpo de una página web.
2. Animación del corazón: tenga en cuenta que aquí no necesitamos pseudoelementos CSS (después y antes) ya que hemos estructurado el corazón con la ayuda de íconos y clases gratuitos disponibles. Ahora pasemos al segundo paso, ahí tienes la misma animación que hicimos en el Método – 1. Obtendrás la animación requerida. En general, se da más preferencia al Método 2 al crear sitios web grandes. Una vez más, la creatividad no tiene límites. Puede aplicar esta animación donde lo considere necesario y también puede crear una nueva animación propia inspirándose en ella.
Publicación traducida automáticamente
Artículo escrito por codeachalesh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA