Reines CSS für eine coole Ladeanimation

Schauen wir uns an, welche Ladeanimationseffekte wir nur mit CSS erstellen können.

Zeichne eine Batterie

Um die Batterie aufzuladen, müssen Sie natürlich zuerst eine Batterie mit CSS zeichnen. Das ist nicht schwierig, zeichnen Sie einfach eine:

Oh, das ist es, gerade so. Nachdem Sie nun eine Batterie haben, laden wir sie direkt auf. Die einfachste Animation wäre, die gesamte Batterie mit Farben zu füllen.

Es gibt viele Methoden und der Code ist sehr einfach. Schauen Sie sich einfach die Wirkung an:

Es hat diesen Geschmack und wenn Sie keine hohen Ansprüche haben, wird es ausreichen. Der blaue Farbverlauf zeigt den Leistungspegel an und die Ladeanimation wird durch die Verschiebungsanimation der Farbblöcke erreicht. Aber ich habe immer das Gefühl, dass etwas fehlt.

Schatten und Farbvariationen hinzufügen

Wenn Sie mit der Optimierung fortfahren möchten, müssen Sie einige Details hinzufügen.

Wir wissen, dass der Batteriestand normalerweise durch Rot angezeigt wird, wenn der Batteriestand niedrig ist, und durch Grün, wenn der Batteriestand hoch ist. Fügen Sie dem gesamten Farbblock einige Schattenänderungen hinzu, um ihm ein atmendes Gefühl zu verleihen, sodass der Ladeeffekt aussieht, als würde er sich tatsächlich bewegen.

Wissenspunkte

An dieser Stelle gibt es eigentlich nur eine Erkenntnis:

Verwenden Sie filter: hue-rotate(), um den Farbübergang der Verlaufsfarbe zu animieren

Wir können einen Farbverlauf nicht direkt animieren, daher passen wir hier den Farbton über Filter an, um die Animation einer Farbverlaufstransformation zu erreichen.

Eine vollständige Demo des obigen Beispiels: CodePen Demo -- Battery Animation One

Wellen hinzufügen

Ok, das ist nur ein kleiner Meilenstein, wir werden noch einen Schritt weitergehen. Die Oberseite der Batterieanzeige ist eine gerade Linie, die etwas langweilig aussieht. Wir können sie hier ändern. Wenn wir die obere gerade Linie in eine rollende Welle ändern können, wird der Effekt realistischer.

Der Effekt nach der Transformation:

Die Verwendung von CSS zum Erzielen dieses Wellen-Scrolling-Effekts ist eigentlich nur ein Trick. Weitere Einzelheiten finden Sie in diesem Artikel, den ich zuvor geschrieben habe:

Reines CSS, um einen Welleneffekt zu erzielen!

Wissenspunkte

Einer der Wissenspunkte hier ist die Verwendung von CSS, um einen einfachen Welleneffekt zu erzielen, der durch einen Trick erreicht wird. Schauen Sie sich einfach das Bild an und Sie werden es verstehen:

Eine vollständige Demo des obigen Beispiels: CodePen Demo -- Batterieanimation Zwei

OK, an diesem Punkt ist der obige Effekt zusammen mit den digitalen Änderungen bereits ein ziemlich guter Effekt. Natürlich sieht der obige Effekt immer noch sehr CSS-mäßig aus und man erkennt auf den ersten Blick, dass er mit CSS erreicht werden kann.

Verwenden Sie leistungsstarke CSS-Filter, um Android-Ladeanimationseffekte zu erzielen

Was ist mit dem unten?

Studierende, die Android-Telefone verwenden, müssen damit vertraut sein. Dies ist der Effekt, wenn ein Android-Telefon aufgeladen wird. Als ich das sah, war ich neugierig: Kann dies mit CSS gemacht werden?

Nach einigen Versuchen habe ich festgestellt, dass sich dieser Animationseffekt auch mit CSS sehr gut simulieren lässt:

Der im obigen GIF aufgezeichnete Effekt wird vollständig mit CSS simuliert.

Die vollständige Demo des obigen Beispiels: HuaWei Akkuladeanimation

Wissenspunkte

Wenn man die Wissenspunkte aufschlüsselt, ist das Wichtigste eigentlich die Verwendung von zwei filter: contrast() und filter: blur() , mit denen dieser Fusionseffekt sehr gut erzielt werden kann.

Nehmen Sie die beiden Filter einzeln heraus. Ihre Funktionen sind:

filter: blur() : Legt einen Gaußschen Unschärfeeffekt auf das Bild fest. filter: contrast() : Passt den Kontrast des Bildes an.

Als sie jedoch „verschmolzen“, kam es zu einem wunderbaren Fusionsphänomen.

Schauen wir uns ein einfaches Beispiel an:

Schauen Sie sich den Prozess der Überschneidung der beiden Kreise genau an. Wenn sich die Kanten berühren, entsteht ein Randfusionseffekt. Die unscharfen Kanten der Gaußschen Unschärfe werden durch den Kontrastfilter eliminiert und der Fusionseffekt wird durch die Gaußsche Unschärfe erzielt.

Natürlich wurde dieser Effekt in früheren Artikeln schon oft erwähnt. Weitere Einzelheiten finden Sie hier:

CSS-Flamme? CSS-Filtertipps und Details, die Sie nicht kennen

Farbtransformation

Natürlich kann man hier auch Farbänderungen einfügen, auch die Wirkung ist sehr gut:

Die vollständige Demo des obigen Beispiels: HuaWei Akkuladeanimation

Punkte, die leicht übersehen werden

Durch Anpassen der Werte der Eigenschaften filter: blur() und filter: contrast() lässt sich der Animationseffekt tatsächlich stark verändern, und gute Effekte erfordern ständiges Debuggen. Natürlich spielt dabei auch die Erfahrung eine sehr große Rolle. Letztendlich muss man aber trotzdem noch mehr ausprobieren.

endlich

Dieser Artikel enthält mehrere Ladeanimationen mit allmählich zunehmenden Effekten. Dieser Artikel weist nur auf die wichtigsten Wissenspunkte hin. Es gibt jedoch viele kleine Details im eigentlichen Ausgabeprozess, die in diesem Artikel nicht erwähnt werden. Interessierte Studierende sollten auf die Demo klicken, um sich den Quellcode genau anzusehen oder ihn selbst zu implementieren.

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf den Stern, um sich anzumelden und zu sammeln.

Nun, dieser Artikel endet hier, ich hoffe, er hilft Ihnen :)

Wenn Sie Fragen oder Anregungen haben, können Sie sich gerne an mich wenden. Dies ist ein Originalartikel und meine Schreibfähigkeiten sind begrenzt. Wenn der Artikel etwas falsch enthält, lassen Sie es mich bitte wissen.