How to realize the smoke effect of fuzzy granular sensation by CSS

Editor to share with you CSS how to achieve fuzzy granular smoke effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Like this:

Careful observation of the smoke effect shows that there are two more important features:

Blur effect

Granular sensation

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

Of course, but in CSS, in addition to filters, we can also use a class of other means to simulate blurred effects.

Pure CSS to realize smoke Animation

First of all, let's look at the following effect:

Suppose we have a character like this:

C

We can simulate the effect of smoke simply by changing text-shadow + opacity:

Span {text-shadow: 0 000 whitesmoke; animation: smoky 5s;} @ keyframes smoky {to {text-shadow: 0 20px whitesmoke; opacity: 0;}}

Look at the effect:

Based on the above, we can add displacement, rotation, scaling, slightly modify the above code, and add some transform transformations:

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

You can get the following results:

After adding transform, there is a feeling that a word is blown away and becomes smoke. On this basis, we only need to put multiple words together and use animation-delay sequence to control each word to trigger the animation effect to get the above complete smoke effect.

The pseudo code is as follows:

C S S / /... / /... All the above CSS codes @ for $item from 1 through 21 {span:nth-of-type (# {$item}) {animation-delay: # {(($item/10))} s;}}

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

The above effect is not my original, it was first seen in this author-- CodePen Demo-- Smoky Text By Bennett Feely.

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

Use SVG feturbulence filter to achieve smoke effect

The smoke of the above smoke animation is still relatively rough. Mainly due to the lack of a little bit of graininess? Missing some of the texture of the smoke.

To achieve a more refined smoke effect, we also need to use the filter of SVG

Next, you will use filter: blur () with a filter to get a more realistic smoke effect.

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