曖昧で粒子の粗い煙の効果は、純粋な CSS でも実現できます。

曖昧で粒子の粗い煙の効果は、純粋な CSS を使用しても実現できます。この記事では、純粋な CSS を使用して、煙の効果をより適切に実現できるかどうかを段階的に見ていきます。

次のように:

煙のエフェクトを注意深く見てください。重要な特徴が 2 つあります:

• ぼかし効果
• 粒状感

最初にぼかし効果を見てみましょう。ぼかしについて考えるとき、ほとんどの学生はまず filter:blur() の使用を思い浮かべます。

もちろんそれは真実ですが、CSS では、フィルターに加えて、他の種類の手段を使用して、ぼかし効果をシミュレートすることもできます。

煙アニメーションを実装するための純粋な CSS

まずそのような効果を見てみましょう:

次のように仮定します。

<span>C</span>

text-shadow opacity:

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

Look Effect を変更するだけで、煙の効果をシミュレートできます。

上記に基づいて、変位、回転、スケーリングを追加し、上記のコードをわずかに変換し、いくつかの transform 変換を追加できます。 ##

span {
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s;
}

@keyframes smoky {
  to {
    transform:
      translate3d(200px, -80px, 0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

次の効果が得られます:

transformを重ね合わせると、単語が吹き飛ばされ、煙のような感じになります。 。これに基づいて、複数の単語をまとめて animation-delay を使用して各単語を順番に制御するだけでアニメーション効果がトリガーされ、上記の完全な煙効果が得られます。

疑似コードは次のとおりです:

    <span>C</span>
    S
    S
    // ...

// ... 上述所有 CSS 代码

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{(($item/10))}s; 
  }
}

風に飛ばされて煙になった単語の効果を得ることができます:

上記のエフェクトは私のオリジナルの創作物ではなく、この作者が最初に見たものです -- CodePen デモ -- Bennett Feely によるスモーキー テキスト

https://codepen.io/bennettfeely/pen /lgybC

SVG 胎児気流フィルターを使用して煙の効果を実現します

上記の煙アニメーションの煙は、まだ比較的粗いです。粒状感が少し足りないのが主な理由でしょうか？煙のテクスチャの一部が欠けています。

より洗練された煙の効果を実現するには、SVG の

フィルターを使用する必要があります。

フィルター:blur next ()## を使用します。

# フィルターを使用して、よりリアルな煙の効果を取得します。 簡単な例として、次のような単語がいくつかあるとします。

<div">SMOKE</div>

単純な CSS:

div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

次のようなグラデーション色を持つ単語をいくつか取得します。

<feturbulence></feturbulence>

フィルターを使用して簡単なプロセスを実行します:

<div>SMOKE</div>

<svg width="0">
  <filter id="filter">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
    <feDisplacementMap in="SourceGraphic" scale="30" />
  </filter>
</svg>

CSSフィルターの使用: url()

このフィルターを導入します。効果を高めるために、このフィルターを

に直接導入しました:

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
}

私たちのフォントは フィルターは流体を与えます感情:

このエフェクトは基本的に煙エフェクトとは関係がないと言えますが、必要なのはぼかしフィルターを追加することだけです。魔法のようなことが起こりました:

body {
    filter: url('#filter');
}
div {
    background: linear-gradient(#fff, #999, #ddd, #888);
    background-clip: text;
    filter: blur(5px);
}

エフェクト全体を即座に

スモーク

たくさん:

OK、追加します ループアニメーションエフェクトの場合は、JavaScript を使用して処理するだけです。

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;

function freqAnimation() {
    frames += .2

    bfx = 0.03;
    bfy = 0.03;

    bfx += 0.005 * Math.cos(frames * rad);
    bfy += 0.005 * Math.sin(frames * rad);

    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);

    window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

効果を見てください:

上記の完全なコードについては、ここをクリックしてください:CodePen CSS SVG Text Smoke Effect

https://codepen.io/Chokcoco/pen/wvrrwVM

もちろん、上記の効果を渡すこともできます:

Control

• baseFrequency属性調整##Control

  <feturbulence></feturbulence>
• numOctaves

  属性調整##Controlscale

  of control
• 属性の調整

  numOctaves#を変更します<feturbulence></feturbulence>

  の ## 属性は 30 から 70 までです。基本的にテキストの輪郭は見えず、テキストは完全に原子化されています。次のようなホバー効果を作成できます:



上記の完全なコードについては、ここをクリックしてください: CodePen CSS SVG Text Smoke Hover Effect

https://codepen.io/Chokcoco/pen / Jjrrojj

このように、filter:blur() と <feturbulence></feturbulence> フィルターに基づいて、非常にリアルな煙のエフェクトを得ることができます。上記のデモに基づいて、多くの興味深い効果を調べることもできますが、この記事では詳しく説明しません。

最後に

#さて、この記事はここで終わります。この記事がお役に立てば幸いです:)
(学習ビデオの共有:

CSS ビデオチュートリアル )

以上が曖昧で粒子の粗い煙の効果は、純粋な CSS でも実現できます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。