CSS-Animation zum Laden von Webseiten: Erstellen Sie verschiedene coole Ladeanimationseffekte

Wenn Benutzer eine Webseite aufrufen, ist es am ungeduldigsten, darauf zu warten, dass die Seite geladen wird. Um die Ängste der Benutzer zu lindern, haben viele Websites damit begonnen, CSS-Ladeanimationen zu verwenden, um das Laden von Seiten interessanter zu gestalten. In diesem Artikel erfahren Sie, wie Sie mit CSS verschiedene coole Ladeanimationseffekte erstellen und stellen spezifische Codebeispiele bereit, die Ihnen bei der Implementierung helfen.

1. Grundlegende Animationen

Lassen Sie uns zunächst einige grundlegende Ladeanimationen erstellen. Wir können die Animationseigenschaft in CSS verwenden, um eine einfache Animation zu erstellen. Die Animationseigenschaft verfügt über mehrere Untereigenschaften:

• Animationsname: Wählen Sie den Namen der anzuwendenden Keyframe-Regel aus.
• animationsdauer: Definieren Sie die Dauer eines Zyklus (in Sekunden oder Millisekunden).
• Animations-Timing-Funktion: Definieren Sie eine Zyklusgeschwindigkeitskurve.
• animation-delay: Definieren Sie die Verzögerungszeit eines Zyklus.
• animation-iteration-count: Definiert, wie oft die Animation abgespielt werden soll.

Schauen wir uns nun ein paar verschiedene Arten grundlegender Ladeanimationen an.

1. Rotationsanimation

In dieser Ladeanimation verwenden wir den folgenden Code, um einen Rotations-Keyframe zu definieren:

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

Der obige Code verwendet die @keyframes-Regel, um einen Keyframe mit dem Namen „rotate“ zu definieren. In diesem Keyframe verwenden wir das Transformationsattribut, um die Drehung zu definieren. In „von“ und „bis“ definieren wir den Grad der Drehung, von 0 bis 360 Grad.

Als nächstes müssen wir diese Animation für unser „Loader“-Element angeben:

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Blinkanimation

In dieser Ladeanimation verwenden wir den folgenden Code, um einen sich wiederholenden blinkenden Keyframe zu definieren:

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

Oben Der Code verwendet die @keyframes-Regel zum Definieren eines Keyframes mit dem Namen „blink“. In diesem Keyframe verwenden wir die Eigenschaft opacity, um die Transparenz des Elements zu definieren. Bei 50 % setzen wir ihn auf 0,5, wodurch er zwischen zwei Zuständen wechselt.

Um diese Animation auf unser „Loader“-Element anzuwenden, verwenden Sie den folgenden Code:

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

II. ERWEITERTE ANIMATION

Da wir nun gelernt haben, wie man eine einfache Ladeanimation in CSS erstellt, wollen wir weiter untersuchen, wie man eine erweiterte Animation erstellt Animationen. Hier sind einige coole Ladeanimationen und ihre Codebeispiele.

1. Wellenanimation

In dieser Ladeanimation verwenden wir den folgenden Code, um den Keyframe eines Wellenmodus zu definieren:

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

Im obigen Code verwenden wir das Transformationsattribut, um den Welleneffekt zu erstellen. Bei den Positionen 0 % und 100 % setzen wir das Element auf seine Ausgangsposition. An der 50 %-Position verwenden wir TranslateX (horizontale Übersetzung) und TranslateY (vertikale Übersetzung), um die Wellenform zu erstellen.

Als nächstes spezifizieren wir diese Animation für unser „Loader“-Element:

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. Diffusionsanimation

In dieser Ladeanimation verwenden wir den folgenden Code, um einen Diffusions-Keyframe zu definieren:

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

Im obigen Code verwenden wir das Transformationsattribut, um einen Diffusionseffekt zu erzeugen. Bei 0 % und 100 % setzen wir das Element auf seine Anfangswerte Minimierung und Transparenz. An der 50 %-Position verwenden wir die Scale-Eigenschaft, um die Diffusionsanimation zu erstellen.

Als nächstes spezifizieren wir diese Animation für unser „Loader“-Element:

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

Zusammenfassung

Mithilfe von CSS können wir verschiedene Arten von Ladeanimationen für unsere Websites erstellen. Diese Ladeanimationen können das Laden von Seiten interessanter machen und den Benutzern die Warteangst nehmen. In diesem Artikel haben wir gelernt, wie man einige grundlegende Ladeanimationen erstellt und wie man fortgeschrittenere Animationen erstellt. Ich hoffe, dass diese Codebeispiele für Ihre Arbeit hilfreich sind.

Das obige ist der detaillierte Inhalt vonCSS-Animation zum Laden von Webseiten: Erstellen Sie verschiedene coole Ladeanimationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!