この記事では、マウスをスライドすると愛が広がる 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...
vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...
例: VMware IOInsight は、VM のストレージ I/O 動作を理解するのに役立つツー...
以前、Amap API を非同期にロードする方法を紹介しました。今回は、vue-amap の使用方法...
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...
<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...
エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...
目次数学オブジェクト共通プロパティ一般的な方法Math.random()文字列メソッド長さプロパティ...
これは私が Vue フレームワークを独学していたときに真似したウェブサイトです。いくつかの都市の天気...
1. はじめにSELinux が Linux にもたらす主な価値は、柔軟で構成可能な MAC メカニ...
クローラー対策ポリシー ファイルを追加しました: vim /usr/www/server/nginx...
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...
目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...
指定されたテーブルからデータをエクスポートするMySQLの詳細な説明必要とする: 1. テーブルはす...