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
1 2 3 4 5 6 | <div class="container">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
<img src="avatar.jpg">
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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;
}
} |
0 Kommentare