How to use css to achieve smoke effect

This article mainly introduces how to use css to achieve smoke effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have something to gain after reading this article on how to use css to achieve smoke effect, let's take a look at it.

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

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

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: