Der unscharfe und körnige Raucheffekt lässt sich auch mit reinem CSS erzielen!

Unscharfe und körnige Raucheffekte lassen sich auch mit reinem CSS erzielen. In diesem Artikel schauen wir uns Schritt für Schritt an, ob wir einige Raucheffekte mit reinem CSS besser erzielen können.

So:

Schauen Sie sich den Raucheffekt genau an. Es gibt zwei wichtige Merkmale:

• Körniges Gefühl
• Beim Nachdenken über den Unschärfeeffekt Ich werde zuerst darüber nachdenken, filter: blur() zu verwenden.

Natürlich stimmt das, aber in CSS können wir neben Filtern auch eine Art andere Mittel verwenden, um den 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;
  }
}

看看效果：

在上述的基础上，我们可以加上位移、旋转、缩放，稍微改造一下上述代码，添加一些 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 Demo -- Smoky Text By Bennett Feely

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

借助 SVG feturbulence 滤镜实现烟雾效果

上述的烟雾动画的烟雾还是比较粗糙的。主要是缺少了一点颗粒感？缺少了一些烟雾的质感。

想要实现更为精致的烟雾效果，我们还得借助 SVG 的 <feturbulence></feturbulence> 滤镜

接下来会使用 filter: blur() 配合 <feturbulence></feturbulence> 滤镜，得到更为逼真的烟雾效果。

举个简单的例子，假设有这样几个字：

<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 的中利用 filter: url() 引入该滤镜，这里为了效果更好，我直接在 上引入了该滤镜：

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

我们的字体就被 <feturbulence></feturbulence> 滤镜 赋予了一种流体的感觉：

这个效果可以说和烟雾效果基本没什么关系，不过只需要再添加一个模糊滤镜，神奇的事情就发生了：

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

整个效果就瞬间烟雾化了很多：

好，给它添加上循环的动画效果，简单的借助 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

当然，上述效果可以通过：

• 控制 <feturbulence></feturbulence> 的 baseFrequency 属性调节

• 控制 <feturbulence></feturbulence> 的 numOctaves 属性调节

• 控制 <fedisplacementmap></fedisplacementmap> 的 scale 属性调节

将 <feturbulence></feturbulence> 的 numOctavesUnschärfeeffekt

zu simulieren. 🎜

🎜Reines CSS zur Implementierung einer Rauchanimation🎜

🎜Sehen wir uns zunächst diesen Effekt an: 🎜🎜🎜🎜Angenommen, wir haben so ein Zeichen: 🎜rrreee🎜Wir übergeben einfach Text -shadow + opacity kann den Effekt von Rauch simulieren: 🎜rrreee🎜Sehen Sie sich den Effekt an: 🎜🎜🎜🎜Auf der Grundlage des oben Gesagten können wir Verschiebung, Drehung, Skalierung und leichte Transformation hinzufügen. Nehmen Sie das Obige Code und füge einige transform-Transformationen hinzu: 🎜rrreee🎜, um den folgenden Effekt zu erzielen: 🎜🎜🎜🎜Nach dem Überlagern von transform fühlt es sich an, als würde ein Wort weggeblasen und in Rauch verwandelt. . Auf dieser Basis müssen wir nur mehrere Wörter zusammenfügen und mit animation-delay jedes Wort nacheinander steuern, um den Animationseffekt auszulösen und den oben erwähnten vollständigen Raucheffekt zu erzielen. 🎜🎜Der Pseudocode lautet wie folgt: 🎜rrreeerrreee🎜Sie können die Wirkung eines Wortes erzielen, das vom Wind weggeblasen und in Rauch verwandelt wird: 🎜🎜🎜

🎜Der obige Effekt ist für mich nicht originell, er wurde zuerst von diesem Autor gesehen – CodePen Demo – Smoky Text von Bennett Feely🎜🎜https://codepen.io/bennettfeely/pen/lgybC🎜

🎜Verwenden Sie den SVG-Feturbulence-Filter, um den Raucheffekt zu erzielen 🎜

🎜obiges Der Rauch in der Rauchanimation ist immer noch relativ grob. Vor allem, weil es etwas an Körnigkeit fehlt? Ein Teil der Rauchtextur fehlt. 🎜🎜Um einen raffinierteren Raucheffekt zu erzielen, müssen wir den Filter <feturbulence></feturbulence> von SVG verwenden. feturbulence> Filter, um einen realistischeren Raucheffekt zu erzielen. 🎜🎜Angenommen, es gibt ein paar Wörter wie dieses als einfaches Beispiel: 🎜rrreee🎜Einfaches CSS: 🎜rrreee🎜Holen Sie sich ein paar Wörter mit Verlaufsfarben wie folgt: 🎜🎜🎜🎜Wir verwenden den Filter <feturbulence></feturbulence> für einfache Verarbeitung Werfen Sie einen Blick darauf: 🎜rrreee🎜CSS verwendet filter: url(), um diesen Filter einzuführen. Für eine bessere Wirkung habe ich diesen Filter direkt auf Filter eingeführt : 🎜rrreee🎜Unsere Schriftart erhält durch den <feturbulence></feturbulence>-Filter ein flüssiges Gefühl: 🎜🎜🎜🎜Man kann sagen, dass dieser Effekt grundsätzlich nichts mit dem Raucheffekt zu tun hat, sondern Sie müssen nur einen Unschärfefilter hinzufügen Spieglein, etwas Magisches ist passiert: 🎜rrreee🎜Der ganze Effekt hat sofort sehr 🎜geraucht🎜: 🎜🎜🎜🎜Okay, fügen Sie einen Schleifenanimationseffekt hinzu und verwenden Sie einfach JavaScript, um ihn zu verarbeiten: 🎜rrreee🎜Sehen Sie sich den Effekt an: 🎜🎜🎜

🎜Oben Für das Ganze Code können Sie hier klicken: CodePen CSS + SVG Text Smoke Effect🎜🎜https://codepen.io/Chokcoco/pen/wvrrwVM🎜

🎜Natürlich können die oben genannten Effekte erzielt werden durch: 🎜

🎜🎜Control<feturbulence></feturbulence>'s baseFrequency-Attributanpassung🎜🎜🎜🎜Control<feturbulence> </feturbulence> Die Attributanpassung numOctaves 🎜🎜🎜🎜 steuert die scale-Attributanpassung 🎜🎜🎜🎜 von <fedisplacementmap></fedisplacementmap> Das Attribut numOctaves von code> wird von 30 auf 70 geändert, und der Umriss des Texts ist grundsätzlich unsichtbar und der Text ist vollständig atomisiert. Wir können einen Hover-Effekt wie diesen erzeugen: 🎜



Für den vollständigen Code oben können Sie hier klicken: CodePen CSS + SVG Text Smoke Hover Effect

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

Auf diese Weise basierend auf dem filter: blur() 配合 <feturbulence></feturbulence> Filter können wir einen sehr realistischen Raucheffekt erzielen. Basierend auf der obigen Demonstration können wir auch viele interessante Effekte untersuchen, auf die wir in diesem Artikel nicht näher eingehen.

Endlich

Okay, das ist das Ende dieses Artikels. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein :)

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonDer unscharfe und körnige Raucheffekt lässt sich auch mit reinem CSS erzielen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!