溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

發(fā)布時(shí)間：2022-02-14 09:09:29 來(lái)源：億速云 閱讀：276 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

先看最終效果↓↓↓

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

前言：

文中效果是利用snowfall.jquery.js實(shí)現(xiàn)的，需要先引入jquery和snowfall.jquery.js。

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

第一步：

利用偽元素before和 :after畫兩個(gè)重疊在一起的長(zhǎng)方形，如圖所示：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

<!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  屬性將兩個(gè)兩個(gè)偽元素分別旋轉(zhuǎn)負(fù)45度、45度，如圖所示：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

      .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 向左偏移一定像素，使兩個(gè)微元素部分重疊，組成愛心樣子，如圖所示：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

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

愛心我們畫完了，那么怎么讓愛心實(shí)現(xiàn)滿屏飛呢，其實(shí)只需要調(diào)用jquery.js和 snowfall.jquery.js就能實(shí)現(xiàn)，效果圖如下：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

完整代碼如下：

<!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>
      //調(diào)用飄落函數(shù) 實(shí)現(xiàn)飄落效果
      $(document).snowfall({
          flakeCount: 50 //愛心的個(gè)數(shù)
      });
      $(window).resize(function () {
        //當(dāng)瀏覽器大小變化時(shí)
        location.reload(true);
      });
  </script>
  <div class="bgimg"></div>
</body>

</html>

其實(shí)個(gè)人覺得愛心畫小一點(diǎn)比較好看，上面畫那么大其實(shí)是為了方便大家看愛心更明顯一些，把愛心畫小后的效果圖如下：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

小的愛心，需改變以下屬性的值：

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

粉色愛心場(chǎng)景圖在下面，歡迎大家自取使用：

怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效

以上就是“怎么用JS代碼實(shí)現(xiàn)情人節(jié)愛心滿屏飄落特效”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手