LabEx
LoginBeitreten

Erstellen einer pulsierenden CSS-Ladeanimation

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man eine Puls-Effekt-Ladeanimation mit CSS erstellt. Wir werden die Eigenschaft animation-delay verwenden, um einen rhythmischen Effekt zu erzeugen, und @keyframes, um die Animation an zwei Punkten im Zyklus zu definieren. Am Ende dieses Labs werden Sie gut verstehen, wie man ansprechende Animationen erstellt, die die Benutzererfahrung Ihrer Webseiten verbessern können.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Puls-Lader

index.html und style.css wurden bereits in der VM bereitgestellt.

Um eine Puls-Effekt-Ladeanimation mit der Eigenschaft animation-delay zu erstellen, folgen Sie diesen Schritten:

  1. Verwenden Sie @keyframes, um eine Animation für zwei <div>-Elemente zu definieren. Setzen Sie den Startpunkt (0%) für beide Elemente, sodass sie keine width oder height haben und sich in der Mitte befinden. Für den Endpunkt (100%) sollen beide Elemente in width und height zunehmen, aber ihre position zurücksetzen auf 0.
  2. Verwenden Sie opacity, um von 1 auf 0 zu übergehen, wenn die Animation abläuft, um den <div>-Elementen einen Verschwindungseffekt zu verleihen, wenn sie sich erweitern.
  3. Setzen Sie eine vorgegebene width und height für den übergeordneten Container, .ripple-loader. Verwenden Sie position: relative, um seine Kinder zu positionieren.
  4. Verwenden Sie animation-delay auf dem zweiten <div>-Element, sodass jedes Element seine Animation zu einem anderen Zeitpunkt startet.

Hier ist der HTML- und CSS-Code, um dies zu erreichen:

<div class="ripple-loader">
  <div></div>
  <div></div>
</div>

.ripple-loader {
  position: relative;
  width: 64px;
  height: 64px;
}

.ripple-loader div {
  position: absolute;
  border: 4px solid #454ade;
  border-radius: 50%;
  animation: ripple-loader 1s ease-out infinite;
}

.ripple-loader div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes ripple-loader {
  0% {
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    opacity: 0;
  }
}

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Puls-Lader-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.