マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成されたノードにランダムな幅、高さ、色を割り当てて、各効果ノードの外観を異ならせる必要があります。 注: 生成されたノードは、ドキュメント フローの外側に配置され、ページ上の他の要素の位置に影響を与えないように、絶対的に配置する必要があります。 コード例: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>マウス効果</title> <スタイル> * { マージン: 0; パディング: 0; } 体 { 背景色: #9df; オーバーフロー: 非表示; 高さ:100vh; } スパン { 高さ: 30px; 幅: 30ピクセル; 境界線の半径: 50%; 位置: 絶対; ポインタイベント: なし; 変換: translate(-50%, -50%); ボックスの影: 10px 10px 30px #45f, -10px -10px 30px #d80; アニメーション: ボックス 5 秒 線形無限; zインデックス: 3; } @keyframes ボックス { 0% { 変換: translate(-50%, -50%); 不透明度: 1; フィルター: 色相回転(0度); } 100% { 変換: translate(-50%, -1000%); 不透明度: 1; フィルター: 色相回転(720度); } } </スタイル> </head> <本文> </本文> </html> <スクリプト> document.addEventListener("mousemove", 関数(e) { var 本文 = document.querySelector("本文"); var span = document.createElement("span"); var x = e.offsetX var y = e.offsetY span.style.left = x + "px" span.style.top = y + "px"; コンソールログ(x + ">>>" + y) var a = Math.random() * 30; span.style.width = 30 + a + "px"; span.style.height = 30 + a + "px"; body.appendChild(span); setTimeout(関数() { span を削除します。 // コンソールログ("ok") }, 4500) }) </スクリプト> 実行結果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストアド プロシージャと共通関数のコード分析
>>: Linux Zabbixカスタム監視およびアラーム実装プロセスの分析
カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...
ブラウザ (Web ドライバー) ベースの Selenium テクノロジを使用してデータをクロールす...
みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...
1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...
Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...
この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...
ページの DIV+CSS レイアウトを行う際、IE6 で画像要素 img の下に余分なスペースができ...
目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...
目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...
エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...
数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...
インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...
JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...