CSSを使用して炎の効果を作成する方法

本文は以下から始まります。

123WORDPRESS.COM ダウンロード:

純粋な CSS3 で超リアルなキャンドルの炎のアニメーション効果を実現するソースコード

今日のヒントは、純粋な CSS を使用して炎、よりリアルな炎を生成することです。

さて、それはどのように見えるでしょうか？ CodePen でキーワードCSS Fireを入力すると、次のようになります。

または、次のようになります。

できれば、CSS のみを使用して、さらに一歩進むことはできるでしょうか?それは次のようになるでしょうか:

達成方法

それを実現するには、 filterとmix-blend-mode組み合わせを使用する必要があります。

派手な CSS エフェクトの多くは、 filter + mix-blend-modeであり、非常に興味深いものですが、ビジネスではまったく使用されません。もちろん、それらについて詳しく学ぶことは決して損にはなりません。

上の写真の通り、キャンドル全体の骨格は炎の部分を除いて非常にシンプルなので、ここでは詳しくは説明しません。主に炎を生成する方法と、炎にアニメーション効果を与える方法を見てみましょう。

ステップ1: フィルターぼかしとフィルターコントラスト

ぼかしフィルターをコントラストフィルターに重ねて、ブレンド効果を作成します。

2 つのフィルターを別々に取り出します。それぞれの機能は次のとおりです。

filter: blur() : 画像にガウスぼかし効果を設定します。
filter: contrast() : 画像のコントラストを調整します。

しかし、それらが「融合」すると、素晴らしい融合現象が起こりました。

簡単な例を見てみましょう:

2 つの円が交差する過程を注意深く見てください。エッジが互いに接触すると、境界融合効果が生成されます。ガウスぼかしのぼやけたエッジはコントラストフィルターによって除去され、ガウスぼかしを使用して融合効果が実現されます。

上記のfilter blur & filter contrastを使用して、まず炎の形に似た三角形を生成する必要があります。（工程は省略）

ここでの炎の形をした三角形の具体的な実装プロセスについては、こちらの記事で詳しく説明しています。CSSフィルターのテクニックと知らない詳細

親要素にfilter: blur(5px) contrast(20)を追加すると、次のようになります。

ステップ2: 炎のパーティクルアニメーション

うまくいっているようなので、炎のアニメーションに移りましょう。親要素のfilter: blur(5px) contrast(20)を削除してから、次に進みましょう。

ここでも、 filterフュージョン効果を使用します。上の炎では、SASS を使用して、さまざまなサイズの円形の茶色の div を多数ランダムかつ均等に分散し、炎の三角形の中に隠しています。次のようになります。

次に、SASS を使用して、中央の小さな円それぞれに、下から上に向かって徐々に消えるアニメーションを与え、異なるanimation-delayを均等に割り当てます。次のようになります。

さて、最も重要なステップはfilter: blur(5px) contrast(20)と、魔法の炎の効果が現れます。

ステップ3: ミックスブレンドモードの仕上げ

もちろん、上記の効果はすでに非常に優れています。さまざまな試行とパラメータの調整を経て、最終的にmix-blend-mode: screenブレンディングモードを追加すると、より良い効果が得られることがわかりました。ヘッダー画像の最終的な効果は次のとおりです。

完全なソースコードは私の CodePen にあります: https://codepen.io/Chokcoco/pen/jJJbmz

その他の効果

もちろん、この方法を習得すれば、炎を生成するこのテクニックは他のエフェクトにも応用できます。下の画像は私が作成した別の小さなデモです。要素の上にマウスを移動すると、炎の効果が生成されます。

CodePen デモ - Hover Fire

実は、これらはフィルターとブレンドモードの組み合わせです。いつものように、誰かが必ず批判のメッセージを残し、「こんなに派手なものは何の意味があるのか」「パフォーマンスは良くない」「ビジネスで使うなら足を折ってやる」などと言うでしょう。

私にとって、あらゆる種類の批判、疑問、そして異なる意見は謙虚に受け入れます。もちろん、テクノロジーは一方では実用的であると同時に、他方では興味や自己娯楽の問題でもあると思います。トロルたちが迂回してくれるといいな〜

話を元に戻すと、この粘着性と湿潤性のテクニックを理解すれば、他にも多くの興味深い効果を生み出すことができます。もちろん、以下のラベルを使用して実現した滴り落ちる効果など、さらに試行錯誤が必要になる場合もあります。

CodePen デモ - ドリップ効果を実現する単一ラベル

注目すべき詳細

アニメーションは美しいものですが、特定の使用時には注意すべき点がいくつかあります。

CSS フィルターfilter: blur(5px) contrast(150%) brightness(1.5)のように、同じ要素に対して複数のフィルターを同時に定義できますが、フィルターを異なる順序で適用することで得られる効果も異なります。

つまり、 filter: blur(5px) contrast(150%) brightness(1.5)とfilter: brightness(1.5) contrast(150%) blur(5px)を使用して同じ画像を処理すると、異なる結果が生成されます。これは、フィルターの色値処理アルゴリズムが画像を処理する順序によるものです。

フィルターアニメーションは多くの計算を必要とし、ページを絶えず再描画します。これはパフォーマンスを非常に消費するアニメーションです。使用時には使用シナリオに注意してください。ハードウェアアクセラレーションをオンにして、レイヤー化テクノロジを適切に使用することを忘れないでください。blur blur() contrast()のフィルター効果を組み合わせ、異なる色を設定すると、異なる効果が生成されます。このカラーオーバーレイの特定のアルゴリズムには、まだ非常に具体的な規則や規制が見つかっていません。より良い使用方法は、さまざまな色を試して、最良の効果を観察することです。注意深い読者は、上記の効果がすべて黒い背景に基づいていることに気付くでしょう。背景色を白に変更しようとすると、効果は大幅に減少します。やっと

この記事では、思考プロセス全体を簡単に紹介するだけであり、多くの CSS コードの詳細とデバッグプロセスは示されていません。主要な CSS プロパティはデフォルトで既にわかっています。詳細については、以下をお読みください。