JS realizes the beautiful special effect of Valentine's Day hearts falling all over the screen (complete code attached)

214 Valentine’s Day is approaching, and programmers with romantic instincts can’t wait to dress up their webpages~ I am no exception, so today I will teach you step by step how to create a romantic background full of love hearts. Flying dynamic effect. PS: Technical experts are very welcome to leave messages for discussion and help me make optimization suggestions!

Let’s look at the final effect first↓↓↓

##Foreword:

The effect in the article is the use of snowfall To implement .jquery.js, jquery and snowfall.jquery.js need to be introduced first. [Recommended:

javascript video tutorial]

Step one:

Use pseudo elements

beforeand:afterDraw two overlapping rectangles, as shown in the picture:

Second step:

Use the

transformattribute to rotate the two pseudo elements by negative 45 degrees and 45 degrees respectively, as shown in the figure:

Step 3:

Use the

leftattribute to offset the pseudo elementafterby a certain pixel to the left, so that the two micro elements partially overlap to form a heart It looks like, as shown in the picture:

We have finished drawing the love, so how to make the love fly all over the screen? In fact, we only need to call jquery.js and snowfall.jquery. js can be achieved, and the rendering is as follows:

The complete code is as follows:

In fact, I personally think that smaller love paintings look better , the purpose of drawing it so big above is to make it easier for everyone to see the love more clearly. The rendering after drawing the love smaller is as follows:

For small hearts, the following attributes need to be changed. Value:

The pink love scene picture is below, everyone is welcome to take it for yourself:

Finally, I wish everyone a happy Valentine's Day and send love~biubiu~❥ (^_-)~

The above is the detailed content of JS realizes the beautiful special effect of Valentine's Day hearts falling all over the screen (complete code attached). For more information, please follow other related articles on the PHP Chinese website!