Heim > Artikel > Web-Frontend > 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:
LinienWenn 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
<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:
ProgrammiervideoDas 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!