Wie erstelle ich einen CSS-Animationsloader nur?

Erstellen Sie einen Animationsloader, der nur HTML und CSS verwendet. Fügen Sie zuerst ein grundlegendes Element zum HTML hinzu:

; 2. Verwenden Sie Grenzen, abgerundete Ecken und Animationseigenschaften, um eine Rotation in CSS zu erreichen, und verwenden Sie die Farbunterschiede für Border-Tops und @KeyFrames, um sich kontinuierlich von 0 bis 360 Grad zu drehen. 3.. Sie können den Laderstil anpassen, indem Sie Größe, Animationsgeschwindigkeit, Farbe oder Form anpassen, z. B. pulsierende Punkte; 4. Verwenden Sie EM/REM -Einheiten und Flex -Layout, um eine ansprechende Anpassung zu gewährleisten. Für diese Methode ist kein JavaScript erforderlich, ist leicht und kompatibel mit modernen Browsern und für kleine Projekte oder alternativen Ladestatus geeignet.

Das Erstellen eines CSS-Animationsloaders ist eine leichte und effektive Möglichkeit, Ladezustände ohne JavaScript anzuzeigen. Hier erfahren Sie, wie Sie mit HTML und CSS einen einfachen Spinnlader verwenden.

1. Grundstruktur (HTML)

Beginnen Sie mit einer minimalen HTML -Struktur. Sie brauchen nur ein Element:

 <div class = "lader"> </div>

Dieser div repräsentiert den Lader auf der Seite.

2. Styling the Loader (CSS)

Verwenden Sie CSS, um einen kreisförmigen Spinner mit Animation zu erstellen. Hier ist ein sauberer, moderner Lader:

 .loader {
  Breite: 40px;
  Höhe: 40px;
  Grenze: 4px fest #f3f3f3;
  Grenztop: 4px fest #3498db;
  Grenzradius: 50%;
  Animation: Spin 1s linear unendlich;
  Rand: 50px Auto; / * zum Zentrieren *///
}

@keyframes spin {
  0% {
    Transformation: Drehen (0DEG);
  }
  100% {
    Transformation: Drehen (360 Grad);
  }
}

Wie es funktioniert

• Grenztechnik : Der Lader verwendet ein transparentes Innenraum mit einem hellgrauen Rand, mit Ausnahme des Oberteils (das gefärbt ist). Dies erzeugt den "Halbkreis" -Effekt.
• border-radius: 50% : Verwandelt das quadratische div in einen perfekten Kreis.
• animation: spin 1s linear infinite : Wendet eine kontinuierliche Rotation an.
• @keyframes spin : Dreht das Element wiederholt von 0 bis 360 Grad.

3.. Anpassungsspitzen

Sie können das Aussehen leicht optimieren:

• Größe : width und height einstellen.
• Geschwindigkeit : Wechseln Sie 1s in der Animation in etwas schnelleres ( 0.5s ) oder langsamer ( 2s ).
• Farben : Ändern Sie die Farben border und border-top .
• Form : Verwenden Sie border-radius: 0 und animierte Skala oder Deckkraft für einen anderen Effekt (z. B. Pulsbalken).

Beispiel: pulsierende Punktlader

 .loader {
  Breite: 15px;
  Höhe: 15px;
  Hintergrund: #333;
  Grenzradius: 50%;
  Animation: Pulse 0,8s Locker-In-Out Infinite;
  Rand: 50px Auto;
}

@keyframes pulse {
  0%, 100% {
    Transformation: Skala (0);
    Deckkraft: 0;
  }
  50% {
    Transformation: Skala (1);
    Deckkraft: 1;
  }
}

4. Machen Sie es reaktionsschnell

Um sicherzustellen, dass es in verschiedenen Behältern gut funktioniert:

• Verwenden Sie em oder rem -Einheiten zur Skalierbarkeit.
• Mitte mit display: flex in einem Wrapper:

 .loader-container {
  Anzeige: Flex;
  Justify-Content: Center;
  Ausrichtung: Zentrum;
  Höhe: 100VH;
}

Letzte Notizen

• Kein JavaScript erforderlich.
• Leichtes und schnelles Rendern.
• Arbeitet an allen modernen Browsern.
• Ideal für kleine Projekte oder Fallback -Ladezustände.

Definieren Sie im Grunde genommen einfach eine Form, wenden Sie eine reibungslose Animation mit @keyframes an und lassen Sie CSS den Rest erledigen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen CSS-Animationsloader nur?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!