[CSSチュートリアル】CSSで炎のエフェクトを記述する方法

以下、本文が始まります。

スクリプトハウスからダウンロード

超リアルなろうそくの炎が燃えるアニメーションのための純粋なCSS3ソースコード

今日のTipsは、ピュアCSSを使用して、もう少しリアルな炎を生成する方法です。

さて、どのように見えるでしょうか？CodePenでキーワードを入力すると CSS Fire をクリックすると、このようなものが出てきます。

あるいはこんな感じ。

もう一歩踏み込んで、CSSだけを使うか？こんな感じでいいでしょうか。

実装方法

さて、私たちは filter + mix-blend-mode を組み合わせることで行われます。

CSSの派手なエフェクトの多くは filter + mix-blend-mode 面白いけど、ビジネスには全く役立たないけど、もっと知っておいて損はない。

上で見たように、炎の部分を除くキャンドルの全体の骨格は非常にシンプルなので、省略します。では、炎がどのように生成され、どのようにアニメーションするのかを見ていきましょう。

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

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

2つのフィルターを個別に取り出して、その効果は

1. filter: blur() : 画像にガウシアンブラー効果を設定します。
2. 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 blend-modeを使用すると、より良い結果が得られ、最終的にヘッダー画像の上は次のようになります。

ソースコードの全文は、私のCodePenにあります。 https://codepen.io/Chokcoco/pen

いくつかの追加効果

もちろん、この方法をマスターすれば、炎を発生させるテクニックを他のエフェクトに転用することも可能です。ここでは、エレメントにカーソルを合わせたときに炎を発生させるデモを紹介します。

画像

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() ブレンド {{コード {コード フィルター効果は、異なる色が異なる効果を生成する設定、この色のオーバーレイの特定のアルゴリズムが非常に特定のルールのルールを発見していない、より良い方法の使用は、より多くの異なる色を試して、最高の効果を観察することです。慎重な読者は、上記の効果は黒の基本色に基づいていることがわかります、白に基本色を変更しようとすると、効果が大幅に削減されますハンズオンします。最後に

この記事では、簡単に思考の全体のプロセスを導入し、多くのCSSコードの詳細は、デバッグプロセスは表示されません。デフォルトで主ないくつかのCSSプロパティは、我々はより多くの詳細を追加するために自分自身を理解するために読んだ後、大まかに習得している：。

{を使用します。 {コード
• {{コード

CSSの技術的な記事については、以下のページにまとめています。 Github -- iCSS 星をクリックすると、コレクションを購読することができます。

音声 CSSで炎エフェクトを書く方法はこの記事が全てです、もっと関連するCSS炎エフェクトのコンテンツはスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、これからもスクリプトハウスをもっと応援して下さいね