Wie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?-HTML-Tutorial-php.cn

Wie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?

PHPz

Freigeben： 2023-08-28 10:21:06

nach vorne

1078 Leute haben es durchsucht

Wie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?

Sticky-Ball-Animation ist eine Animation, die mit HTML und CSS erstellt wurde. Dieser Animationsstil wird erstellt, indem Keyframes verwendet werden, um CSS-Eigenschaftswerte an verschiedenen Punkten in der Animation anzugeben, und die Animation dann auf das HTML-Element angewendet wird.

Gooey Balls ist ein beliebter und optisch ansprechender Animationsstil, der mit HTML und CSS erstellt wurde. In dieser Animation erzeugen wir einen glatten, flüssigen und elastischen Effekt für ein rundes Objekt, sodass es wie eine Kugel aus Schleim aussieht. Diese Art von Animation ist eine großartige Möglichkeit, Ihrer Website mehr Interesse und Attraktivität zu verleihen. Mit den folgenden Schritten können wir ganz einfach Gooey-Balls-Animationen in HTML und CSS erstellen.

Schritt 1 – Erstellen Sie HTML-Code für die Sticky-Ball-Animation

Zuerst erstellen wir die HTML-Struktur, die zum Erstellen der Sticky-Ball-Animation verwendet wird.

Schritt 2 – CSS-Stile hinzufügen

In diesem Schritt fügen wir dem Ball CSS-Stile hinzu, damit er wie ein Kreis aussieht. Um den Ball zu erstellen, legen wir die Breite und Höhe des Balls fest und stellen den Randradius auf 50 % ein, um ihn kreisförmig zu machen.

Schritt 3: Keyframes erstellen

Hier erstellen wir Keyframes für die Animation. Keyframes werden verwendet, um die Werte von CSS-Eigenschaften an verschiedenen Stellen in der Animation anzugeben.

Schritt 4: Animation anwenden

Zuletzt wenden wir die Animation auf den Ball an.

Mit diesen einfachen Schritten können wir ganz einfach eine einfache Sticky-Ball-Animation mit HTML und CSS erstellen. Wir können Animationen anpassen, indem wir die Werte von CSS-Eigenschaften, Keyframes und Animations-Timing ändern.

Beispiel 1

Sticky-Ball-Animation mit Änderung der Hintergrundfarbe.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 50vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: #40e0d0;
      }
      @keyframes gooey {
         0% { transform: scale(1); background-color: #40e0d0; }
         50% { transform: scale(1.5); background-color: #ff00ff; }
         100% { transform: scale(1); background-color: #40e0d0; }
      }
      .ball {
         animation: gooey 2s infinite ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with Background Color Change</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir einen Ball erstellt, der sich ständig wiederholt.

Beispiel 2

Hier ist ein Beispiel für die Erstellung einer Sticky-Ball-Animation mit einem springenden Ball mithilfe von HTML und CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 70vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background:radial-gradient(yellow, green, red);
      }
      @keyframes jump {
         0% {transform: translateY(0);}
         50% {transform: translateY(-50px);}
         100% {transform: translateY(0);}
      }
      .ball {
         animation: gooey 2s infinite ease-in-out, jump 2s infinite
         ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with a Jumping ball</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir „gooey“ definiert und zwei Keyframes übersprungen. Der schleimige Keyframe animiert die Skalierung des Balls von seiner Originalgröße auf das 1,5-fache seiner Originalgröße und zurück. Sprung-Keyframes animieren die vertikale Position des Balls und lassen ihn auf und ab springen. Beide Animationen werden auf das Ballelement angewendet, haben eine Dauer von 2 Sekunden und verfügen über einen Ease-in- und Ease-out-Effekt.

Fazit

Das Erstellen von Sticky-Ball-Animationen ist eine unterhaltsame und einfache Möglichkeit, die visuelle Attraktivität Ihrer Website zu verbessern. Mit ein paar Zeilen HTML- und CSS-Code können wir diesen coolen Effekt auf unserer Website hinzufügen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Sticky-Ball-Animation mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!