CSS マウス ポインタ インタラクション効果の詳細な調査

今日は、このような興味深いインタラクティブ エフェクトを実装してみましょう。このエクスチェンジ エフェクトによるフロントエンド マウス ポインタのインタラクションについて話しましょう。皆さんのお役に立てれば幸いです。

元のマウス ポインター スタイルを必要な効果に変更し、特別なインタラクティブ効果を追加します。 [推奨される学習:css ビデオ チュートリアル]

マウス スタイルの変更

まず最初の質問です。これは図で確認できます。上記では、マウス ポインタのスタイルがドットに変更されています:

# 通常は次のようになります:

cursorスタイルを通じてマウス ポインターの形状を変更できます。

マウス スタイルを変更するには、cursorを使用します。

cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片，并且设置 fallback 兜底 */ cursor: url(hand.cur), pointer;

もちろん、この対話では、

ここでは、cursor: none## でページのマウス ポインターを非表示にします。 #:

{ cursor: none; }

このようにして、ページ上のマウス ポインタが消えます:

グローバル イベント リスニングによるシミュレーションマウス ポインタ

# が消えているので、単純にマウス ポインタをシミュレートします。最初に

の円形 div を実装し、

:

<div></div>

#g-pointer { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: #000; border-radius: 50%; }

次に、イベント モニタリングを通じて、本文のmousemove## をリッスンします。 、小さな円の位置をリアルタイムのマウス ポインターの位置と一致させます:

const element = document.getElementById("g-pointer"); const body = document.querySelector("body"); function setPosition(x, y) { element.style.transform = `translate(${x}px, ${y}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX - 5, e.clientY - 5); }); });

cursor: noneが設定されていない場合、効果は次のようになります:

cursor: noneを本文に追加します。これは、マウス ポインターをシミュレートするのと同じです:

これに基づいて、現在のマウス ポインターは実際にはdivであるため、これに任意のインタラクティブ効果を追加できます

この記事の冒頭の例を例に挙げると、ミックス モードmix-blend-mode: exclusionを使用するだけで、シミュレートされたマウス ポインターがインテリジェントに移動できるようになります。さまざまな背景色。次に色を変更します。

ブレンディング モードのテクニックについてまだ質問がある場合は、私の記事を参照してください: ブレンディング モードを使用してテキストを背景色にインテリジェントに適応させるhttps://github.com /chokcoco/iCSS/issues/169

完全なコード:

Lorem ipsum dolor sit amet
 

ログイン後にコピー

body { cursor: none; background-color: #fff; } #g-pointer-1, #g-pointer-2 { position: absolute; top: 0; left: 0; width: 12px; height: 12px; background: #999; border-radius: 50%; background-color: #fff; mix-blend-mode: exclusion; z-index: 1; } #g-pointer-2 { width: 42px; height: 42px; background: #222; transition: .2s ease-out; }

ログイン後にコピー

const body = document.querySelector("body"); const element = document.getElementById("g-pointer-1"); const element2 = document.getElementById("g-pointer-2"); const halfAlementWidth = element.offsetWidth / 2; const halfAlementWidth2 = element2.offsetWidth / 2; function setPosition(x, y) { element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`; element2.style.transform = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`; } body.addEventListener('mousemove', (e) => { window.requestAnimationFrame(function(){ setPosition(e.clientX, e.clientY); }); });

ログイン後にコピー

質問の画像の効果を完全に復元できます:

完全なコードについては、ここをクリックしてください: マウス カーソルの遷移https://codepen.io/Chokcoco/pen/rNJQXXV

伪类事件触发

有一点需要注意的是，利用模拟的鼠标指针去Hover元素，Click元素的时候，会发现这些事件都无法触发。

这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。

当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上pointer-events: none，阻止默认的鼠标事件，让事件透传即可：

{ pointer-events: none; }

鼠标跟随，不仅于此

当然，这里核心就是一个鼠标跟随动画，配合上cursor: none。

而且，鼠标跟随，我们不一定一定要使用 JavaScript。

我在 不可思议的纯 CSS 实现鼠标跟随 一文中，介绍了一种纯 CSS 实现的鼠标跟随效果，感兴趣的也可以看看。

https://github.com/chokcoco/iCSS/issues/46

基于纯 CSS 的鼠标跟随，配合cursor: none，也可以制作出一些有意思的动画效果。像是这样：

CodePen Demo -- Cancle transition & cursor none

https://codepen.io/Chokcoco/pen/gOvZoVv

（学习视频分享：web前端）

以上がCSS マウス ポインタ インタラクション効果の詳細な調査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。