search

Home >Web Front-end >JS Tutorial >JS realizes the beautiful special effect of Valentine's Day hearts falling all over the screen (complete code attached)

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

藏色散人
藏色散人Original
2022-02-12 14:46:089270browse

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↓↓↓

GIF 2022-2-12 星期六 上午 9-39-55.gif

##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]

snowfall.jquery.js下载地址：https://www.npmjs.com/package/jquery-snowfall

Step one:

Use pseudo elements

before and :afterDraw two overlapping rectangles, as shown in the picture:

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        body {
            overflow-y: hidden;
        }
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .snowfall-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 0;
        }
    </style>
</head>
<body>
    <div class="heart-body">
        <div class="snowfall-flakes"></div>
    </div>
</body>
</html>

Second step:

Use the

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

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

      .snowfall-flakes:before {
            -webkit-transform: rotate(-45deg);
            /* Safari 和 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 和 Chrome */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            transform: rotate(45deg);
        }

Step 3:

Use the

left attribute to offset the pseudo element after by 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:

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

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

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:

GIF 2022-2-12 星期六 上午 9-44-42.gif

The complete code is as follows: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        body {
            overflow: hidden;
        }

        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }

        .snowfall-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 0;
        }

        .snowfall-flakes:before {
            -webkit-transform: rotate(-45deg);
            /* Safari 和 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 和 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;
            z-index:-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;
    }
    </style>
</head>

<body>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  <script src="snowfall.jquery.js"></script>
  <script>
      //调用飘落函数 实现飘落效果
      $(document).snowfall({
          flakeCount: 50 //爱心的个数
      });
      $(window).resize(function () {
        //当浏览器大小变化时
        location.reload(true);
      });
  </script>
  <div class="bgimg"></div>
</body>

</html>

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:

GIF 2022-2-12 星期六 上午 9-39-55.gif

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

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

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

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

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Let’s talk about how Node.js + worker_threads implements multi-threading? (detailed explanation)Next article：Let’s talk about how Node.js + worker_threads implements multi-threading? (detailed explanation)

Related articles

See more