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

This article mainly introduces how to use pure CSS to achieve upright red candle, beating flame, rising smoke effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

First, preemptive preview of the effect

See the following MP4 video effects:

The main three parts: upright red candle, beating flame, rising smoke, these three parts are all realized by pure CSS.

It is mainly realized by CSS3's linear gradient linear-gradient, radial gradient radial-gradient, box shadow box-shadow, fillet border-radius, transform transform and animation animation.

To experience it, you can click here: pure CSS3 to achieve candle, flame and smoke demo

Click on the candle to extinguish the flame or light the flame. The source code of the implementation is on the demo page.

Second, the introduction of some interesting technical implementations. Fillet to realize the arc of the bottom edge of the candle

The arc effect in the above figure can be achieved directly using CSS3's border-radius, but it is not simply to set a value, because the horizontal fillet and vertical fillet of this effect are different, the specific settings are as follows:

.candle-body {width: 40px; height: 120px; border-radius: 0 40px 40px/0 0 16px 16px;}

Border-radius slash in front of the horizontal fillet size, slash after the four values are vertical fillet size, in-depth introduction can refer to my previous article: "when is the autumn moon, how much do you know about CSS3 border-radius?" .

In this article, there is a demo that can be used to debug various fillet effects and render them in real time, saving the pain of various brain fillet effects, such as the bottom arc effect parameters:

two。 The shape of the flame is also realized by fillet.

The shape of the flame is also realized by fillet, so I drag a slider into the concave shape in the CSS3 border-radius fillet tool:

Then all the values are divided by 300 and converted to a percentage is the shape of the candle.

. candle-flame {width: 10px; height: 20px; border-radius: 37% 37% 34% 34% 70% Universe 70% 33% 33%;} 3. Realization of White, Yellow and Red three-layer structure Box Shadow of Flame

The flame white-yellow-red three-layer structure is realized by CSS3 box-shadow, which is inseparable from the fourth numerical parameter of box-shadow-expansion. In fact, the principle of this effect is not difficult to understand, that is, several circles of light and shadow effects are superimposed, and what is difficult is the debugging of the effect. For example, this flame has been adjusted for at least an hour, but it is not very satisfactory. I only blame myself for not observing enough candles when I was a child.

.candle-flame {width: 10px; height: 20px; box-shadow: 0-8px 8px 4px # fff, 0-15px 15px 12px # ff0, 0-15px 0 14px # f00;} 4. Smoke is actually some elements of radial gradient.

Smoke is actually some elements that are drawn with a radial gradient, and then move up left and right according to the time difference, while becoming larger and less transparent.

In fact, the easiest way is to use the Gaussian blur blur () filter in CSS3 filter to achieve the simplest, but in the Chrome browser, when executing with the animation, there will be residual shadows on the right and bottom, and this rendering bug is really hard to tolerate, so the curve saves the nation and uses a radial gradient to achieve a round paste effect.

The default radial gradient is attached to the far side, so the keyword closest-side is needed to achieve a circle that goes from colored to transparent:

.candle-smoke span {width: 18px; height: 18px; background-image: radial-gradient (closest-side circle, rgba), rgba (0meme 0penny .6), rgba (0meme 0px.4), rgba (0meme 0mine0px.0) } Thank you for reading this article carefully. I hope the article "how to use pure CSS to achieve upright red candle, beating flame and smoke effect" is helpful to everyone. At the same time, I hope you can support me and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.