怎么用JS代码实现情人节爱心满屏飘落特效

2024-04-02 19:04:59 206人浏览安东尼

摘要

今天小编给大家分享一下怎么用js代码实现情人节爱心满屏飘落特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们

今天小编给大家分享一下怎么用js代码实现情人节爱心满屏飘落特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

先看最终效果↓↓↓

怎么用JS代码实现情人节爱心满屏飘落特效

前言：

文中效果是利用snowfall.Jquery.js实现的，需要先引入jquery和snowfall.jquery.js。

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

第一步：

利用伪元素before和 :after画两个重叠在一起的长方形，如图所示：

怎么用JS代码实现情人节爱心满屏飘落特效

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

第二步：

利用 transfORM 属性将两个两个伪元素分别旋转负45度、45度，如图所示：

怎么用JS代码实现情人节爱心满屏飘落特效

      .snowfall-flakes:before {
            -WEBkit-transform: rotate(-45deg);
            
            -moz-transform: rotate(-45deg);
            
            -ms-transform: rotate(-45deg);
            
            -o-transform: rotate(-45deg);
            
            transform: rotate(-45deg);
        }
        .snowfall-flakes:after {
            -webkit-transform: rotate(45deg);
            
            -moz-transform: rotate(45deg);
            
            -ms-transform: rotate(45deg);
            
            -o-transform: rotate(45deg);
            
            transform: rotate(45deg);
        }

第三步：

利用 left 属性，将伪元素 after 向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示：

怎么用JS代码实现情人节爱心满屏飘落特效

      .snowfall-flakes:after {
            left: 13px;
            -webkit-transform: rotate(45deg);
            
            -moz-transform: rotate(45deg);
            
            -ms-transform: rotate(45deg);
            
            -o-transform: rotate(45deg);
            
            transform: rotate(45deg);
        }

爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和 snowfall.jquery.js就能实现，效果图如下：

怎么用JS代码实现情人节爱心满屏飘落特效

完整代码如下：

<!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);
            
            -moz-transform: rotate(-45deg);
            
            -ms-transform: rotate(-45deg);
            
            -o-transform: rotate(-45deg);
            
            transform: rotate(-45deg);
        }

        .snowfall-flakes:after {
            left: 13px;
            -webkit-transform: rotate(45deg);
            
            -moz-transform: rotate(45deg);
            
            -ms-transform: rotate(45deg);
            
            -o-transform: rotate(45deg);
            
            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>

其实个人觉得爱心画小一点比较好看，上面画那么大其实是为了方便大家看爱心更明显一些，把爱心画小后的效果图如下：

怎么用JS代码实现情人节爱心满屏飘落特效

小的爱心，需改变以下属性的值：

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

粉色爱心场景图在下面，欢迎大家自取使用：

怎么用JS代码实现情人节爱心满屏飘落特效