Coole pulsierende Animation für Avatare oder andere Elemente (HTML & CSS)

Heute möchte ich euch eine coole Animation zeigen mit der ihr eure Avatare aufhübschen könnt oder andere Elemente. Ich persönlich finde solche augenfesselnde Animationen immer eine geniale Sache – man kann sie nämlich da einsetzen wo man will dass der Besucher genau hinschaut. Eben auf ein Avatar oder eine CTA oder sonst einem Element das besonders wichtig ist.

Diese Anmation ist wirklich so einfach einzubauen, dass man damit richtig schön herumgespielen kann und für sich selbst anpassen kann.

Also nicht nur eine Animation bei der man voll Profi sein muss, sondern auch für einfache Menschen die ihre Webseite aufhübschen wollen.

Video

HTML

<div class="container">
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
        <img src="avatar.jpg">
    </div>

CSS

img {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    z-index: 1;
    position: relative;
}

.container {
    position: relative;
}

.pulse1,
.pulse2,
.pulse3 {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: 0;
    background: #4DBBCA;
    animation: pulse 2s infinite;

}


.pulse2 {
    animation-delay: 0.5s;
}

.pulse3 {
    animation-delay: 1.5s;
}

@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}