JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）-jsチュートリアル-php.cn

JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）

藏色散人

リリース： 2022-02-12 15:00:37

オリジナル

9176 人が閲覧しました

214 バレンタインデーが近づいており、ロマンチックな本能を持つプログラマーは、ウェブページをドレスアップするのが待ちきれません~私も例外ではありません。そこで、今日は、愛のハートでいっぱいのロマンチックな背景を作成する方法を段階的に説明します。画面の飛行ダイナミック効果。 PS: 技術専門家がディスカッション用にメッセージを残して、最適化の提案を手伝ってくれるのを大歓迎です。

最初に最終的な効果を見てみましょう↓↓↓

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

#前書き:

の効果この記事では、snowring の使用について説明します。 .jquery.js を実装するには、まず jquery と Snownowring.jquery.js を導入する必要があります。 [推奨: javascript ビデオチュートリアル ]

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

ログイン後にコピー

ステップ 1:

疑似要素 before と を使用します。後図に示すように、重なり合う 2 つの長方形を描画します:

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>

ログイン後にコピー

2 番目のステップ:

を使用します。 #transform 属性を使用して、図に示すように、2 つの疑似要素をそれぞれマイナス 45 度および 45 度回転させます。

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

ログイン後にコピー

ステップ 3:

left 属性を使用して、擬似要素 after を特定のピクセルだけ左にオフセットし、2 つのマイクロ要素が部分的に重なってハートを形成します。図に示すように、次のようになります:

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 と Snowsky.jquery.js を呼び出す必要があり、レンダリングは次のようになります:

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

完全なコードは次のとおりです:

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

ログイン後にコピー

実のところ、個人的には愛の絵は小さいほうが見栄えがすると思いますが、上に大きく描くのは、誰でも愛をよりはっきりと確認できるようにするためです。

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

小さなハートの場合は、次の属性を変更する必要があります。値:

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

ログイン後にコピー

ピンク色のラブシーンの写真は下にあります。ぜひ手に取って使ってください:

JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）