利用snowfall.jquery.js实现满屏爱心表白代码

时间：2022-11-10 18:01:33

利用snowfall.jquery.js实现满屏爱心表白代码

一、效果展示

利用snowfall.jquery.js实现满屏爱心表白代码

二、代码分析

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

利用snowfall.jquery.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度，如图所示：

 

利用snowfall.jquery.js实现满屏爱心表白代码


.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);
 }

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

利用snowfall.jquery.js实现满屏爱心表白代码

.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);
}

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

利用snowfall.jquery.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);
            /* 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);
        }
    </style>
</head>

<body>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/snowfall.jquery.js"></script>
  <script>
      //调用飘落函数 实现飘落效果
      $(document).snowfall({
          flakeCount: 50 //爱心的个数
      });
  </script>
</body>

</html>

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

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

.snowfall-flakes:after {
    left: 4px;
}

如果我的博客对你有帮助 请 “????点赞” “✍️评论” “????收藏” 一键三连哦！

标签：

相关文章