Last time we learned the basics of some CSS filters, the CSS filter Filter property
This time we're going to use CSS filters to achieve the effect of a flame.
Explain
To achieve the above flame effect, let us first understand some of the necessary things.
Last time we talked about two filters, blur and contrast.
Blur is to set the image Gaussian blur, contrast is to adjust the contrast of the image, they use together will produce a fusion effect.
It is important to set this in the red background of the figure filter:contrast(20); , two circles set filter:blur(10px); if not clear, we look at the comparison.
Well know this, we start to realize the flame effect.
These 3 steps are roughly required:
1. Draw the triangle with the border first
You know, if width is 0,height is also 0, only with the border, the border is triangular, we look at width and height are 0, but the border width is 100px of the elements look like
, 4 sides of the border color is not the same, we clearly see the 4 triangles, we now need one of the following things, I believe you know how to achieve.
2, adjust the size and color of the triangle to achieve similar flame appearance
This step is simple, we just need to add these three lines of code to the already implemented triangles above
Border-radius:45%;transform:scalex (. 4); Filter:blur (20px) contrast (30);
3. Let the flames move.
This step is more troublesome, but also very good understanding, is the use of the above mentioned fusion effect, so that many small circles randomly through the triangle can be, look at the following picture, you can understand the principle.
Well, it's definitely easy to understand the code.
Complete the Code
<!doctype html>Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
Pure CSS for photo wall 3D effect
CSS Drawing fan pattern
CSS loading animation effects using tutorial
CSS3 REM (set font size) using tutorial
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
