UI Effect: Sonar Wave Animation

📛 Nombre en la Industria: CSS Ripple Effect / Radar Pulse Animation

🎯 El Objetivo

El objetivo es destacar la imagen del autor o un elemento clave sin usar bordes sólidos aburridos. Queremos un efecto que respire, como un sonar bajo el agua o una señal de radar, ideal para notificaciones o estados “activos”.

🦈 Demo en Vivo

Observa cómo las ondas se expanden desde la foto central.

## 🛠️ La Implementación

Para lograr esto en tu sitio, utilizamos pseudo-elementos ::before y ::after en el contenedor de la imagen.

/* 1. El Contenedor Padre */
.avatar-container {
    position: relative;
    z-index: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Las Ondas (Pseudo-elementos) */
.avatar-container::before,
.avatar-container::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid cyan; /* Color del borde */
    opacity: 0;
    z-index: -1; 
}

/* 3. La Animación */
.avatar-container::before {
    animation: sonar 2.5s infinite ease-out;
}

.avatar-container::after {
    animation: sonar 2.5s infinite ease-out;
    animation-delay: 0.8s; 
}

@keyframes sonar {
    0% {
        width: 100%; height: 100%; 
        opacity: 0.8;
    }
    100% {
        width: 250%; height: 250%; 
        opacity: 0; 
    }
}