Ehrlich gesagt ist das auch nciht ganz einfach. Ich hab das jetzt auch nur kopiert und grundsätzlich gehört da auch noch ein bisschen Wissen über diverse Dinge dazu. Neben HTML und CSS (Fortgeschritten), muss man auch Wissen wie Animation aufgebaut sind, z.b. was eine transition ist (
https://wiki.selfhtml.org/wiki/CSS/E...ion/transition)
Wobei in dem Fall eine etwas komplexere CSS Eigenschaft wirkt (
https://wiki.selfhtml.org/wiki/CSS/E...mationen/scale)
Der ganze Code kann auch noch gekürzt werden, hilft vielleicht für's Verständnis:
HTML-Code:
<style type="text/css">
@keyframes rubberBand {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
.cv-icon-container:hover {
animation-name: rubberBand;
animation-duration: 1s;
animation-fill-mode: both;
}
.cv-icon-container {
background-color: #F3F3F3;
position: relative;
border-radius: 100%;
width: 120px;
height: 120px;
}
</style>
<div class="cv-icon-container"></div>