Wie erziele ich mit CSS einen Animationseffekt für springende Bälle? Implementierungsbeispiel einer springenden Ballanimation

Wie erziele ich mit CSS einen Animationseffekt für springende Bälle? In diesem Artikel erfahren Sie anhand von Codebeispielen, wie Sie den Animationseffekt des springenden Balls in CSS erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Animations-Keyframes definieren

Für diese Animation verwenden wir zwei Keyframes – einen, um den Ball horizontal mit konstanter Geschwindigkeit zu verschieben, und einen anderen, um ihn grob parabolisch anzuwenden vertikale Sprungbewegung. Es ist möglich, horizontale und vertikale Übersetzung in einem einzigen Keyframe zu kombinieren, aber das wird für den gewünschten Effekt nicht funktionieren.

Eine horizontale Bewegung kann einfach mit dem folgenden Keyframe erreicht werden:

 @-webkit-keyframes travel {
    from {              }
    to   { left: 640px; }
  }
  @keyframes travel {
    from {              }
    to   { left: 640px; }
  }

Auf diesen Keyframe wird später mit dem zugewiesenen Namen „Reise“ verwiesen und linear (Transformations-Timing-Funktion) wird zur Anwendung verwendet Im Schlüsselbild ändert die Funktion bei jeder Iteration die Richtung.

Für die vertikale Bounce-Animation nutzen wir die einfachen Ein- und Ausblend-Timing-Funktionen, um die Auswirkungen von Schwerkraftfeldern zu simulieren:

 @-webkit-keyframes bounce {
    from, to  {
      bottom: 0;
      -webkit-animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      -webkit-animation-timing-function: ease-in;
    }
  }
  @keyframes bounce {
    from, to  {
      botttom: 0;
      animation-timing-function: ease-out;
    }
    50% {
      bottom: 220px;
      animation-timing-function: ease-in;
    }
  }

Dieser Keyframe wurde „Bounce“ genannt " bis Zum späteren Nachschlagen.

Durch die Kombination dieser beiden Keyframes wird unser „Ball“ horizontal um 640 Pixel und vertikal um 220 Pixel bewegt. Natürlich müssen diese Werte an die Größe der „Bühne“ angepasst werden.

2. Bereiten Sie die Bühne für die Animation vor

Wie üblich richten wir zunächst eine „Bühne“ ein, auf der die Animation ausgeführt wird. In diesem Fall ein einfaches DIV mit den Abmessungen 660 x 240 Pixel. Eine Breite von 100 % wäre schön, aber das Platzieren einiger Elemente ohne Kenntnis der genauen Pixelbreite ist schwierig.

#stage {
    position: relative;
    margin: 1em auto;
    width: 660px;
    height: 240px;
    border: 2px solid #666;
    background: #cff;
  }

In dieser Phase richten wir ein DIV-Element ein, das sich horizontal hin und her bewegt, und darin ein DIV, das den „Ball“ darstellt, der auf und ab springt:

#traveler {
    position: absolute;
    width: 20px;
    height: 240px;
    -webkit-animation-name: travel;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 4.8s;
    animation-name: travel;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 4.8s;
  }
  #bouncer {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    -webkit-animation-name: bounce;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.2s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-duration: 4.2s;
  }

Also das ' „Ball“ hat eine Größe von 20 x 20 Pixeln und abgerundete Ecken.

3. Stellen Sie die Ballbewegung ein

Wir haben einige einfache HTML-Tags vervollständigt:

<div id="stage">
   <div id="traveler">
       <div id="bouncer"><!-- --></div>
   </div>
</div>

Wenn Ihr Browser dies unterstützt, wird die Animation automatisch gestartet und im folgenden Feld (oder #Stufe) auf unbestimmte Zeit fortfahren:

Wir haben ein zusätzliches Element hinzugefügt und etwas Stil, um die x- und y-Komponenten der Animation hervorzuheben, kein JavaScript erforderlich, der Rest des Codes ist genau wie gezeigt.

CSS: bounce-animation.css (https://www.the-art-of-web.com/bounce-animation.css)

Du bist fertig!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie erziele ich mit CSS einen Animationseffekt für springende Bälle? Implementierungsbeispiel einer springenden Ballanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!