ホームページ >ウェブフロントエンド >jsチュートリアル >JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）

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

藏色散人オリジナル: 2022-02-12 14:46:089260ブラウズ

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

最後に、皆さんに幸せなバレンタインデーをお祈りして愛を送ります~biubiu~❥ (^_-)~

以上がJSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Node.js + worker_threads がマルチスレッドを実装する方法について話しましょう。 (詳しい説明)次の記事：Node.js + worker_threads がマルチスレッドを実装する方法について話しましょう。 (詳しい説明)

続きを見る