So implementieren Sie einen einfachen Loading-Effekt mit CSS

In der Frontend-Entwicklung ist das Laden eine sehr häufige Funktion. Wenn die Webseitendaten geladen werden, hoffen wir, dem Benutzer während des Wartens ein visuelles Feedback zu geben, um das Benutzererlebnis zu verbessern. In diesem Artikel implementieren wir einen einfachen Ladeeffekt über CSS.

1. Verwenden Sie Animationsanimationen, um Loading zu implementieren.

Animation ist ein neues Modul in CSS3, mit dem sehr komplexe Animationseffekte erstellt werden können. Hier verwenden wir Animation, um einen Ladeeffekt zu erzeugen.

Fügen Sie zunächst einen Container für den Loading-Effekt im HTML hinzu:

<div class="loading">
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
</div>

Als nächstes definieren Sie eine Keyframe-Animation in CSS zum Drehen des „Kreises“.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Gestalten Sie dann die Klasse .loading-circle so, dass sie einen Kreis darstellt, und verwenden Sie darin die oben definierte Animation.

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

Zuletzt formatieren Sie den Container im .css-loading so, dass er auf der Seite zentriert ist, und passen Sie die Position und Größe des „Kreises“ entsprechend an.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

Der vollständige Implementierungscode lautet wie folgt:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

2. Verwenden Sie Transition, um Loading zu implementieren

Zusätzlich zur Animation können wir auch Transition in CSS verwenden, um den Loading-Effekt zu erzielen.

Wir fügen außerdem einen Container in HTML als Anzeigebereich von Loading hinzu:

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

In CSS definieren wir den Anfangs- und Endzustand für die Klasse .loading-circle-2 und verwenden Transition, um eine Glätte zwischen den Zuständen zu erreichen Übergang.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Abschließend formatieren wir das .loading-2-Element so, dass es auf der Seite zentriert ist.

Der vollständige Implementierungscode lautet wie folgt:

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Zusammenfassung

Dieser Artikel zeigt, wie man CSS verwendet, um den Ladeeffekt durch zwei verschiedene Methoden zu erzielen. Obwohl Animation relativ komplex ist, können damit sehr reichhaltige und vielfältige Animationseffekte erzeugt werden. Der Übergang ist prägnanter und leichter zu verstehen und kann einige einfache Animationen erzielen.

Im Allgemeinen ist die Verwendung von CSS zur Implementierung von Loading eine relativ einfache Möglichkeit, die Benutzererfahrung effektiv zu verbessern. Natürlich müssen wir in der tatsächlichen Entwicklung möglicherweise auch einige Anpassungen und Stiloptimierungen vornehmen, die auf den tatsächlichen Anforderungen des Projekts basieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen einfachen Loading-Effekt mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!