ネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
MySQLのイベントスケジューラEVENTを理解する
MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...
Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル
以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...
IEではボタンが両側に伸びる
ボタン (input, button) を記述すると、IE では次のようになります。単語数が増えると...
トップナビゲーションバーメニューを作成するためのHTML+CSS
ナビゲーションバーの作成:技術要件: CS HTMLタグ達成目的:ナビゲーションバーメニューの作成コ...
node.js の require メソッドの読み込みルールの詳細な説明
require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...
Dockerコンテナに入る方法と出る方法
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
VueはPCで写真をアップロードする機能を実現
この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...
モバイル端末の適応に関する簡単な説明
序文フロントエンド コードの記述では、「互換性」という言葉から逃れることはできません。過去の PC ...
LeetCode の SQL 実装 (197. 気温上昇)
[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...
MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)
インストール プロセスは、コンパイル手順を除いて、基本的にソース バージョンと同じです。この記事では...
mysql5.5.28 のインストール チュートリアルは非常に詳細です。
参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...
Linux での Nginx 監視の問題
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
Nest.js 認証検証方法の例
目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...
MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。
遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...
MySQL マルチテーブル結合入門チュートリアル
接続は、実際の外部キー（人工的に作成された 2 つのテーブル間の対応関係を指します。対照的に、FOR...