So erstellen Sie einen Flammeneffekt mit CSS

Unten beginnt der Haupttext.

123WORDPRESS.COM Herunterladen:

Reines CSS3, um einen ultrarealistischen Quellcode für den Animationseffekt der brennenden Kerzenflamme zu erzielen

Der heutige Tipp besteht darin, reines CSS zu verwenden, um Flammen zu erzeugen, also realistischere Flammen.

Na, wie sieht es denn aus? Geben Sie bei CodePen das Schlüsselwort CSS Fire ein und Sie finden Folgendes:

Oder so etwas:

Könnten wir hoffentlich noch einen Schritt weiter gehen und nur CSS verwenden? Könnte es so sein:

So erreichen Sie es

Nun, dazu müssen wir filter und mix-blend-mode verwenden.

Viele auffällige CSS-Effekte sind filter + mix-blend-mode , die sehr interessant sind, aber im Geschäftsleben überhaupt nicht verwendet werden. Natürlich schadet es nie, mehr darüber zu erfahren.

Wie im Bild oben zu sehen ist, ist das Skelett der gesamten Kerze mit Ausnahme des Flammenteils sehr einfach, daher werden wir nicht näher darauf eingehen. Schauen wir uns vor allem an, wie man die Flamme erzeugt und wie man ihr Animationseffekte verleiht.

Schritt 1: Filterunschärfe && Filterkontrast

Der Unschärfefilter wird auf den Kontrastfilter gelegt, um einen Mischeffekt zu erzeugen.

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

1. filter: blur() : Legt einen Gaußschen Unschärfeeffekt auf das Bild fest.
2. 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.

Mithilfe der oben genannten filter blur & filter contrast müssen wir zunächst ein Dreieck erzeugen, das der Form einer Flamme ähnelt. (Den Vorgang auslassen)

Der spezifische Implementierungsprozess des flammenförmigen Dreiecks wird in diesem Artikel ausführlich erläutert: CSS-Filtertechniken und Details, die Sie nicht kennen

Das Hinzufügen von filter: blur(5px) contrast(20) zum übergeordneten Element sieht folgendermaßen aus:

Schritt 2: Flammenpartikelanimation

Es scheint zu funktionieren, also machen wir mit der Flammenanimation weiter. Entfernen wir filter: blur(5px) contrast(20) des übergeordneten Elements und machen dann weiter.

Auch hier verwenden wir filter -Effekt. In der obigen Flamme verwenden wir SASS, um eine große Anzahl kreisförmiger brauner Divs unterschiedlicher Größe zufällig und gleichmäßig zu verteilen und sie im Flammendreieck zu verstecken, das so aussieht:

Als nächstes verwenden wir SASS, um jedem kleinen Kreis in der Mitte eine Animation zu geben, die allmählich von unten nach oben verschwindet, und weisen gleichmäßig unterschiedliche animation-delay zu. Das sieht dann so aus:

OK, der wichtigste Schritt besteht darin filter: blur(5px) contrast(20) des übergeordneten Elements einzuschalten. Dann wird der magische Flammeneffekt angezeigt:

Schritt 3: Mix-Blend-Mode-Politur

Natürlich sind die oben genannten Effekte schon sehr gut. Nach verschiedenen Versuchen und dem Anpassen von Parametern habe ich schließlich festgestellt, dass das Hinzufügen von mix-blend-mode: screen Blending Mode“ einen besseren Effekt hat. Der endgültige Effekt des Header-Bildes ist wie folgt:

Der vollständige Quellcode befindet sich auf meinem CodePen: https://codepen.io/Chokcoco/pen/jJJbmz

Einige andere Effekte

Selbstverständlich lässt sich diese Technik zur Flammenerzeugung, wenn man diese Methode einmal beherrscht, auch auf andere Effekte übertragen. Das Bild unten ist eine weitere kleine Demo, die ich gemacht habe. Wenn man mit der Maus über ein Element fährt, wird ein Flammeneffekt erzeugt:

CodePen-Demo – Hover Fire

Nun, das sind eigentlich einige Kombinationen aus Filtern und Mischmodi. Und wie immer hinterlässt bestimmt jemand eine kritische Nachricht mit den Worten: „Was soll dieser ganze tolle Kram?“, „Die Leistung ist nicht gut“ und „Wenn Sie es wagen, ihn geschäftlich zu verwenden, breche ich Ihnen die Beine.“

Ich persönlich akzeptiere jede Art von Kritik, Zweifel und abweichende Meinungen mit Demut. Natürlich denke ich, dass Technologie einerseits praktisch ist, andererseits aber auch eine Frage des Interesses und der Selbstunterhaltung ist. Ich hoffe, die Trolle machen einen Umweg~

Zurück zum Thema: Wenn Sie diese klebrige und nasse Technik beherrschen, können Sie auch viele andere interessante Effekte erzielen. Natürlich benötigen Sie möglicherweise weitere Versuche, wie zum Beispiel den Tropfeffekt, der durch die Verwendung eines Etiketts unten erzielt wird:

CodePen-Demo – Einzelnes Etikett zum Erzielen eines Tropfeffekts

Bemerkenswerte Details

Obwohl Animationen schön sind, gibt es bei ihrer spezifischen Verwendung dennoch einige Dinge zu beachten:

CSS-Filter können mehrere Filter gleichzeitig für dasselbe Element definieren, zum Beispiel filter: blur(5px) contrast(150%) brightness(1.5) . Die Effekte, die durch die Anwendung der Filter in unterschiedlicher Reihenfolge erzeugt werden, sind jedoch auch unterschiedlich.

Mit anderen Worten: Wenn Sie für die Verarbeitung desselben Bildes filter: blur(5px) contrast(150%) brightness(1.5) und filter: brightness(1.5) contrast(150%) blur(5px) verwenden, werden unterschiedliche Ergebnisse erzielt. Dies liegt an der Reihenfolge, in der der Farbwertverarbeitungsalgorithmus des Filters das Bild verarbeitet.

Die Filteranimation erfordert viele Berechnungen und zeichnet die Seite ständig neu. Es handelt sich um eine sehr leistungsintensive Animation. Bitte achten Sie bei der Verwendung auf das Nutzungsszenario. Denken Sie daran, die Hardwarebeschleunigung einzuschalten und die Layering-Technologie richtig zu verwenden. Wenn Sie blur() mit contrast() -Filtereffekten mischen und unterschiedliche Farben einstellen, werden unterschiedliche Effekte erzeugt. Der spezifische Algorithmus dieser Farbüberlagerung hat noch keine sehr spezifischen Regeln und Vorschriften gefunden. Die bessere Art, sie zu verwenden, besteht darin, verschiedene Farben auszuprobieren und den besten Effekt zu beobachten. Aufmerksame Leser werden feststellen, dass die oben genannten Effekte alle auf einem schwarzen Hintergrund basieren. Wenn Sie versuchen, die Hintergrundfarbe in Weiß zu ändern, wird der Effekt erheblich reduziert. endlich

Dieser Artikel stellt nur kurz den gesamten Denkprozess vor und zeigt viele Details des CSS-Codes und des Debugging-Prozesses nicht. Die wichtigsten CSS-Eigenschaften sind bereits standardmäßig bekannt. Weitere Details erfahren Sie nach dem Lesen von:

• filter
• mix-blend-mode

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.

Dies ist das Ende dieses Artikels zum Erstellen eines Flammeneffekts mit CSS. Weitere Informationen zu CSS-Flammeneffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!