ネイティブ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 :is() と :where() の簡単な分析
Safari (Technology Preview 106) および Firefox (バージョン...
MySQL 面接でよく聞かれる質問への回答
序文：さまざまな技術職の面接では、MySQL 関連の質問がよくされるようです。開発職の面接でも運用職...
MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...
MySQL インデックスのパフォーマンス最適化の問題に対する解決策
MySQL によって作成される最適化はインデックスを追加することですが、インデックスを追加しても目的...
IE7 互換モードで IE8 を有効にするコード
最も人気のあるタグはIE8ですブラウザベンダーはバージョンアップデートのリリースに躍起になっている一...
CnBlogs カスタムブログスタイルの共有
半夜かけてようやくブログのスタイルを大体完成させることができました。ブログ全体が青を基調としていて、...
nginxリバースプロキシwebSocket設定の詳細な説明
最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...
HTML、CSS、RSSフィードが正しいかどうかを確認する無料ツール
この種のエラーに対処するための 1 つの方法は、まずマークアップとスタイルシートを検証することです。...
VueにおけるAxios非同期通信の詳細な説明
1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...
Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例
0. はじめに2016 年 8 月 18 日 今日、iPhone をスライドさせてロックを解除すると...
Ubuntu で nginx を使用して WebDAV ファイル サーバーを構築する詳細なプロセス
nginxをインストールするnginx-fullをインストールする必要があることに注意してください。...
Mysql 8.0.18 ハッシュ結合テスト (推奨)
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト
序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...
MySQLクエリトランザクション処理へのノード接続の実装
目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...
Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明
1. css: ドラッグテーブル.css @charset "UTF-8"; ....