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

Today, the editor will share with you how to use JS code to realize the special effects of Valentine's Day. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Let's take a look at the final result, ↓↓↓.

Foreword:

The effect in this paper is realized by snowfall.jquery.js, so we need to introduce jquery and snowfall.jquery.js first.

Snowfall.jquery.js download address: https://www.npmjs.com/package/jquery-snowfall

Step one:

Draw two overlapping rectangles with pseudo elements before and: after, as shown in the figure:

Body {overflow-y: hidden;}. Heart-body {width: 500px; margin: 100px auto; position: relative;}. Fall-flakes:before, .snowfall-flakes:after {content: "; position: absolute; left: 0px; top: 0px Display: block; width: 30px; height: 46px; background: red; border-radius: 50px 50px 0;}

Step 2:

Use the transform attribute to rotate the two pseudo elements by minus 45 degrees and 45 degrees, respectively, as shown in the figure:

.snowfall-flakes:before {- webkit-transform: rotate (- 45deg); / * Safari and Chrome * /-moz-transform: rotate (- 45deg); / * Firefox * /-ms-transform: rotate (- 45deg); / * IE 9 * /-o-transform: rotate (- 45deg) / * Opera * / transform: rotate (- 45deg);} .snowfall-flakes:after {- webkit-transform: rotate (45deg); / * Safari and Chrome * /-moz-transform: rotate (45deg); / * Firefox * /-ms-transform: rotate (45deg) / * IE 9 * /-o-transform: rotate (45deg); / * Opera * / transform: rotate (45deg);}

Step 3:

Using the left attribute, offset the pseudo-element after to the left by a certain pixel, so that the two micro-elements partially overlap to form a loving appearance, as shown in the figure:

.snowfall-flakes:after {left: 13px;-webkit-transform: rotate (45deg); / * Safari and Chrome * /-moz-transform: rotate (45deg); / * Firefox * /-ms-transform: rotate (45deg); / * IE 9 * /-o-transform: rotate (45deg) / * Opera * / transform: rotate (45deg);}

We have finished painting love, so how to make love fly full screen? in fact, you only need to call jquery.js and snowfall.jquery.js to achieve it. The effect is as follows:

The complete code is as follows:

Body {overflow: hidden;}. Heart-body {width: 500px; margin: 100px auto; position: relative;}. Fall-flakes:before, .snowfall-flakes:after {content: "; position: absolute; left: 0px; top: 0px Display: block; width: 30px; height: 46px; background: red; border-radius: 50px 50px 00;} .snowfall-flakes:before {- webkit-transform: rotate (- 45deg); / * Safari and Chrome * /-moz-transform: rotate (- 45deg) / * Firefox * /-ms-transform: rotate (- 45deg); / * IE 9 * /-o-transform: rotate (- 45deg); / * Opera * / transform: rotate (- 45deg);} .snowfall-flakes:after {left: 13px;-webkit-transform: rotate (45deg) / * Safari and Chrome * /-moz-transform: rotate (45deg); / * Firefox * /-ms-transform: rotate (45deg); / * IE 9 * /-o-transform: rotate (45deg); / * Opera * / transform: rotate (45deg);} .bgimg {position:fixed Top: 0; left: 0; width:100%; height:100%; min-width: 1000px; zoom: 10; zoom: 1; background-color: # fff; background: url (bgimg.jpg) no-repeat; background-size: cover -webkit-background-size: cover;-o-background-size: cover; background-position: center 0;} / / call the falling function to achieve the falling effect $(document) .snowfall ({flakeCount: 50 / / number of hearts}) $(window) .resize (function () {/ / when the browser size changes, location.reload (true);})

In fact, I think it is better to draw a small love picture. The reason why it is so big is to make it easier for everyone to see the love is more obvious. The effect of the small love painting is as follows:

For small love, you need to change the values of the following attributes:

.fall-flakes:before, .snowfall-flakes:after {width: 10px; height: 16px; border-radius: 10px 10px 00;} .snowfall-flakes:after {left: 4px;}

The pink love scene is shown below. You are welcome to use it yourself:

These are all the contents of this article entitled "how to use JS code to achieve Valentine's Day special effects". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.