Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 04.06.2018, 22:26
Benutzerbild von protonenbeschleuniger
protonenbeschleuniger protonenbeschleuniger ist offline
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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>
Mit Zitat antworten