Verwenden Sie reines CSS, um einen einfachen Ladeanimationseffekt zu erzielen (Codebeispiel).

In diesem Artikel wird anhand von Codebeispielen erläutert, wie Sie mithilfe von reinem CSS einen einfachen Ladeanimationseffekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Empfohlenes Tutorial: CSS-Video-Tutorial】

Ich habe gesehen, dass viele Websites derzeit GIF-Bilder für ihre Ladeeffekte verwenden, also war ich neugierig, wie man das nur mit CSS erreichen kann? Es kommen gute Sachen, bitte holt sie ab.

Difficulty Faktor

Das HTML-Layout hat oberste Priorität.

Analysieren wir zunächst die Zusammensetzung des Animationseffekts:

Linien

Wenn die Belastung stillsteht, bilden mehrere Linien einen Kreis

Diese Linien sind gleich lang, aber die Richtungen sind unterschiedlich.Jede Linie nicht Durchlaufen Sie den gesamten Durchmesser, aber Die Einheit ist der Radius

Kreis

Der Gesamteffekt ist ein Ring, die Hintergrundfarbe des inneren Kreises ist dieselbe wie die des gesamten Hintergrunds
• • Animation
  • Beginnen Sie ab einem bestimmten Punkt Linie und die Farbe (Transparenz) jeder Radiuslinie werden nacheinander geändert
• Zusammenfassend verwenden wir die folgenden Schritte, um das Geheimnis des Ladeeffekts Schritt für Schritt zu lüften:
  • (1) Verwenden Sie HTML um dieselben Linien zu implementieren, die entlang eines bestimmten Punktes verteilt sind und einen Kreis bilden.
  (2) Zeichnen Sie einen kleinen Kreis, fügen Sie eine Hintergrundfarbe hinzu und bedecken Sie ihn bis zur Mitte der Linie.
• (3) Fügen Sie eine Verlaufsanimation hinzu Ändern Sie die Transparenz der Linie.
  • (4) Bewegen Sie die Linien, indem Sie unterschiedliche Animationsverzögerungen für verschiedene Linien festlegen.
  HTML Wenn die Richtung gleich ist, legen Sie sie in die gleiche Position.

Da die Animationsverzögerung jeder Radiuslinie unterschiedlich ist, fügen Sie zwei linke und rechte Linien hinzu.

Kreismitte stellt den inneren Kreis dar.

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

Analyse :

Der übergeordnete Container des gesamten Effekts muss eine nicht statische Positionierung festlegen, um das Layout untergeordneter Elemente zu erleichtern. Dieses Beispiel ist relativ.

Alle Linien haben die gleiche Größe und abgerundete Ecken.

Linien entlang der gleichen Durchmesserrichtung haben den gleichen Drehwinkel das Gleiche, und die Animationsverzögerung beginnt ab einer bestimmten Zeile, eine nach der anderen

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonVerwenden Sie reines CSS, um einen einfachen Ladeanimationseffekt zu erzielen (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!