ネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
推薦する
CSS での三角形の描画と巧妙な応用例の詳細な説明
鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...
MySQL 10進数符号なし更新負数を0に変換
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案
スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...
MySQLの構文、特殊記号、正規表現の詳細な説明
Mysql でよく使用される表示コマンド1. 現在のデータベース サーバー内のデータベースの一覧を表...
MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ
SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...
MySQL インデックスのパフォーマンス最適化の問題に対する解決策
MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...
Dockerコンテナにvimコマンドがない問題を解決する方法
問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...
CentOS 7でsambaを使用してフォルダーを共有するための完全な手順
序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...
背景画像に CSS3 変換を適用するためのソリューション
CSS 変換は便利ですが、背景画像にはまだ適用されていません。この投稿では、背景画像を回転させたい場...
JavaScript のモジュール性の説明
目次序文： 1. コンセプト2. モジュール化の利点3. 複数のスクリプトタグを導入した後の問題1....
MySQL ステートメントの実行順序と書き込み順序の例の分析
選択ステートメントの完全な構文は次のとおりです。 選択 DISTINCT <選択リスト>...
zabbix を使用して ogg プロセスを監視する (Linux プラットフォーム)
以前作成されたデータベースの ogg プロセスは、発見されるまでの約半月間ダウンしていました。起動で...
antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)
目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...
CSS 線形グラデーション凹型長方形遷移効果の実装
この記事では、線形グラデーションの凹四角形の遷移効果の難しさやアイデアについて説明します。主に、凹四...
HTML メタビューポート属性の詳細な説明
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...