La forma del corazón es una forma muy popular, en este artículo usaremos CSS puro para dibujar la forma del corazón, y luego utilizaremos la animación CSS para lograr el efecto del corazón.
Antes de esto, debemos entender el papel de los pseudo-elementos :: after y :: before para ::before crear un pseudo-elemento que se convertirá en el primer elemento hijo que coincida con el elemento seleccionado. A menudo, los content atributos se usan para agregar contenido decorativo a un elemento.
En el siguiente ejemplo, el elemento: before pseudo-class se usa para agregar un cuadrado al elemento cuya clase es heart.
.heart:before {
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}: before y: after deben usarse junto con el contenido. Este atributo generalmente se usa para agregar contenido como imágenes o texto al elemento. Cuando las pseudo-clases: before y: after se usan para agregar ciertas formas en lugar de imágenes o texto, la implementación del contenido sigue siendo Obligatorio, pero su valor puede ser una cadena vacía.
En el ejemplo anterior, la clase es el elemento central: la pseudoclase anterior agrega un rectángulo amarillo, la altura y el ancho del rectángulo son 50 px y 70 px respectivamente. Dado que el radio del borde se establece en 25%, el rectángulo es un rectángulo redondeado, La posición relativa es 5px desde la izquierda y 50px desde la parte superior.
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform :rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content:'' ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
Aquí nos hemos dado cuenta de la necesidad de dibujar el corazón, y el resto es establecer el efecto de animación del corazón.
Primero, simplemente revise los puntos de conocimiento relacionados con la animación.
Si desea agregar animación a un elemento, necesitamos comprender la propiedad de animación y la regla @keyframes. La propiedad de animación se utiliza para controlar la apariencia de la animación, y la regla @keyframes controla los cambios en cada etapa de la animación. Hay un total de 8 propiedades de animación.
| Atributos | Significado | |
| nombre-animación | Establecer nombre de animación | |
| duración de la animación | El tiempo que tarda la ejecución de la animación (puede ser un decimal, pero debe ser un número positivo), por ejemplo, duración de la animación: 1s; | |
| retraso de la animación | Después de que se abre la página, cuánto tiempo comienza a ejecutarse la animación, por ejemplo, animation-delay: 3s; | |
| modo de sincronización de animación (estado al final de la ejecución) | hacia adelante | Detente en el último cuadro después de la animación. |
| hacia atrás | Regrese al primer cuadro después de la animación. | |
| recuento-iterador de animación | num (1,2,3 ....) | El número de veces que se ejecuta la animación. |
| infinito | La animación ha estado dando vueltas de un lado a otro | |
| animación-dirección (dirección de marcha) | alterno | Funcionamiento alternativo |
| marcha atrás | Correr en reversa | |
| inversión inversa | Jugar al revés y luego reproducir | |
| animación-play-state | corriendo | La animación actual se está ejecutando. |
| pausa | La animación actual se puede detener. | |
| animación-sincronización-función (dibujar el ritmo realizado en cada ciclo de animación) | facilitar | Lento-rápido-muy lento |
| lineal | Velocidad uniforme | |
| facilidad en | Primero despacio | |
| Facilitarse | Primero rápido, luego lento | |
| facilidad de entrada | Lento-rápido-lento | |
@keyframes puede crear animaciones. El principio de crear animación es cambiar gradualmente un conjunto de estilos CSS a otro. Específicamente, al establecer las propiedades CSS de los "cuadros" correspondientes durante la animación, el tiempo de cambio se especifica en porcentaje, o las palabras clave "de" y "a" son equivalentes a 0% y 100%. Por ejemplo, la propiedad 0% en CSS es como la escena de apertura en una película. El atributo 100% en CSS es el aspecto final del elemento, que es equivalente al reparto o la toma de crédito en la película. CSS agrega efectos a las transiciones de elementos en el tiempo correspondiente. El siguiente ejemplo ilustra el uso de @keyframes y las propiedades de animación:
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}El elemento cuya identificación es anim, el código establece el nombre de la animación en colorido, y establece la duración de la animación en 3 segundos. Luego, haga referencia a @keyframes a la propiedad de animación denominada colorido. colorido establece el color en azul al comienzo de la animación (0%) y amarillo al final de la animación (100%). Tenga en cuenta que no solo se pueden establecer las transiciones de inicio y fin, sino que también puede establecer cualquier porcentaje entre 0% y 100%.
Cada segundo de la animación del latido del corazón contiene dos partes. heartLos elementos (incluidos :beforey :after) usan transformatributos para cambiar su tamaño, y el fondo divusa backgroundatributos para cambiar su color.
Cada segundo de la animación heartbeat contiene dos partes: el elemento heart (que incluye: before y: after) usa el atributo transform para cambiar su tamaño, y el div de fondo usa el atributo background-color para cambiar su color.
Establece el estilo de cada cuadro:
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count:infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
animation-iteration-count:infinite;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}Añadir animación:
@keyframes backdiv {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}parte html:
<div class="back"></div>
<div class="heart"></div>El efecto final es el siguiente:
