ネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
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. テーブルはす...