それでは、カーソル/マウスを移動することで、clientX に基づいた波状パターンを表すスタイルを備えた div を生成する基本的な作業例を用意しました。
addEventlistener を window に追加した場合にのみ機能します: window.onmousemove= e =>AnimationBubble(e.clientX);
clientX pos を受け入れ、いくつかのクラスを含む div を生成し、数秒後に削除する単純な関数です。
mousemove eventlistener を追加すると CPU 使用率を大幅に節約できます。ユーザーが 親 div/コンテナ の上にマウスを置いた場合にのみ div が生成されることを示します。これをフッターセクションに追加して、ユーザーにとってよりインタラクティブなものにすることを考えています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS クラス:
＃＃＃お役に立てれば！pointer-events: none;を#bubble_wrapperのcursor: none;に置き換えるだけで、期待どおりに動作するはずです :)