ネイティブJSでマウススライドによる愛の拡散効果を実現

ネイティブJSでマウススライドによる愛の拡散効果を実現

この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。

以下はコード実装です。コピーして貼り付け、収集していただいて結構です。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>マウススライドのラブエフェクトを実現するネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
            フォント ファミリ: 'Microsoft YaHei'、サンセリフ;
        }
 
        体 {
            高さ:100vh;
            背景: #000;
            オーバーフロー: 非表示;
        }
 
        スパン {
            位置: 絶対;
            背景: url(heart.png);
            ポインタイベント: なし;
            幅: 100ピクセル;
            高さ: 100px;
            背景サイズ: カバー;
            変換: translate(-50%, -50%);
            アニメーション: 2 秒の線形無限アニメーション;
        }
 
        @keyframes アニメーション {
            0% {
                変換: translate(-50%, -50%);
                不透明度: 1;
                フィルター: 色相回転(0度);
            }
 
            100% {
                変換: translate(-50%, -1000%);
                不透明度: 0;
                フィルター: 色相回転(360度);
            }
        }
    </スタイル>
</head>
 
<本文>
    <スクリプト>
        document.addEventListener('mousemove', (e) => {
            本文を document.querySelector('body') とします。
            heart = document.createElement('span') とします。
            x = e.offsetXとする
            y = e.offsetYとする
            heart.style.left = x + 'px'
            heart.style.top = y + 'px'
            サイズ = Math.random() * 100 とします。
            heart.style.width = サイズ + 'px'
            heart.style.height = サイズ + 'px'
            body.appendChild(ハート)
            タイムアウトを設定する(() => {
                ハート.削除()
            }, 3000)
        })
    </スクリプト>
</本文>
 
</html>

以下は上記のコードで紹介した画像 heart.png です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはマウスをクリックしたときに浮かぶハート効果を実現します

<<:  MySQLを安全にシャットダウンする方法

>>:  innerHTML を理解する

推薦する

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

VMware IOInsight を使用して、仮想マシンのストレージ パフォーマンスの監視を改良する

例: VMware IOInsight は、VM のストレージ I/O 動作を理解するのに役立つツー...

vue-amap のインストールと使用手順

以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

HTML テーブル タグ チュートリアル (47): ネストされたテーブル

<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...

JavaScript の組み込みオブジェクト 数学と文字列の詳細な説明

目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...

Vueは小さな天気予報アプリケーションを実装します

これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...

SELINUXの動作原理の詳細な説明

1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...

UA による Web サイトのクロールを防ぐ Nginx のクローラー対策戦略

クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...

Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明

目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...

HTML テーブルタグチュートリアル (3): 幅と高さの属性 WIDTH、HEIGHT

デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

MySQLの指定されたテーブルからデータをエクスポートする例の詳細な説明

指定されたテーブルからデータをエクスポートするMySQLの詳細な説明必要とする: 1. テーブルはす...