Animación de ping con CSS mínimo

Animación de ping con CSS mínimo — Amit Merchant — Un blog sobre PHP, JavaScript y más

He visto esta animación de ping en varios sitios web donde un círculo se expande y luego se contrae a su tamaño original. Es una animación bastante ordenada que representa un ping o una notificación.

Pensé en crear una animación similar usando CSS mínimo y así es como resultó.

Animación de ping con CSS mínimo

En realidad es bastante simple de implementar. Primero, necesitamos definir un "punto" elemento que será el estático y un "latido del corazón" elemento que se animará detrás del punto.

Aquí está el HTML para el mismo.

<div class="container">
  <span class="heartbeat"></span>
  <span class="dot"></span>
</div>

Ahora definamos el CSS para el mismo.

.dot {
  position: relative;
  width: fit-content;
  background: linear-gradient(135deg, #7932f6, #805ad5 48%, #342662);
  border-radius: 40px;
  width: 3.75rem;
  height: 3.75rem;
}

.heartbeat {
  position: absolute;
  width: fit-content;
  background-color: #7932f6;
  border-radius: 40px;
  width: 3.75rem;
  height: 3.75rem;
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

Como puedes ver, el dot el elemento tendrá su posición establecida en relative y el heartbeat el elemento tendrá su posición establecida en absolute. es porque queremos heartbeat elemento a la posición relativa a dot elemento.

A continuación, debemos configurar la animación para el heartbeat elemento. Usaremos el ping animación que escalará el elemento 2 veces su tamaño original, luego se desvanece un número infinito de veces. tenemos que mantenerla opacity para 0.75 para que no sea demasiado brillante.

Y el cubic-bezier La función en la animación establecerá la curva de animación. Puedes jugar con él para conseguir el efecto deseado.

Poniéndolo todo junto, aquí está el CodePen para lo mismo.

Si quieres conocer otros artículos parecidos a Animación de ping con CSS mínimo puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas