Amazing! ! Can CSS also achieve smoke effects?

Recently, CSS has been used to achieve some effects that seem to be beyond the capabilities of CSS:

This article continues this series. This article mainly wants to discuss whether some smoke effects can be better achieved by using CSS. Like this:

Carefully observe the smoke effect, there are two more important characteristics:

Blur effect
Grainy

First look at the blur effect. When thinking of blur, most students first think of using filter: blur() .

Of course yes, but in CSS, in addition to filters, we can also use a class of other methods to simulate the effect of blurring

Pure CSS to achieve smoke animation

Let's first look at such an effect:

Suppose, we have such a character:

<span>C</span>

We can simulate the effect of smoke just by text-shadow + opacity

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

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

See the effect:

On the basis of the above, we can add displacement, rotation, and scaling, and modify the above code a bit, adding some transform transformations:

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;
  }
}

You can get the following effects:

After superimposing transform , there is a feeling of a character being blown off and turned into smoke. On this basis, we only need to put multiple words together, use animation-delay control each word in order to trigger the animation effect, and then we can get the above-mentioned complete smoke effect.

The pseudo code is as follows:

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

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

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

You can get the effect of a word blown away by the wind and turned into smoke:

, it was first seen by this author - 161cd19b71f40e CodePen Demo - Smoky Text By Bennett Feely

Use SVG feturbulence filter to achieve smoke effect

The smoke of the above smoke animation is relatively rough. Mainly because it lacks a little graininess? The texture of some smoke is missing.

To achieve a more refined smoke effect, we have to use SVG's <feturbulence> filter. If you don't know much about this filter, you can read these articles of mine:

Next, we will use filter: blur() with <feturbulence> filter to get a more realistic smoke effect.

To give a simple example, suppose there are a few words:

<div">SMOKE</div>

Simple CSS:

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

Get such a few words with gradient color:

We use the <feturbulence> filter to simply deal with it:

<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>

In CSS, we use filter: url() introduce this filter. For better results, I directly introduced this filter <body>

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

Our font is given a fluid feel <feturbulence>

This effect can be said to have nothing to do with the smoke effect, but just add another blur filter, and the magical thing happens:

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

The whole effect instantly smokes a lot:

OK, add a looping animation effect to it, and simply handle it with 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);

See the effect:

For the complete code above, you can hit here: CodePen CSS + SVG Text Smoke Effect

Of course, the above effects can be achieved by:

Control <feTurbulence> of baseFrequency property adjustment
Control <feTurbulence> of numOctaves property adjustment
Control <feDisplacementMap> of scale property adjustment

<feTurbulence> the numOctaves attribute of 061cd19b71f6c0 from 30 to 70. Basically, the outline of the text cannot be seen, and the entire text is fogged. We can make a hover effect like this:

For the complete code above, you can hit here: CodePen CSS + SVG Text Smoke Hover Effect

In this way, based on the filter: blur() with the <feturbulence> filter, we can get very realistic smoke effects. Based on the above demonstration, we can also explore many interesting effects, which will not be repeated in this article.

At last

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my account - 161cd19b71f72d iCSS front-end interesting 161cd19b71f72e 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.

Amazing! ! Can CSS also achieve smoke effects?

Pure CSS to achieve smoke animation

Use SVG feturbulence filter to achieve smoke effect

At last

chokcoco

引用和评论

【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高