Shulou(Shulou.com)06/02 Report--

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:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.