ホームページ > 記事 > ウェブフロントエンド > CSS マウス ポインタ インタラクション効果の詳細な調査
今日は、このような興味深いインタラクティブ エフェクトを実装してみましょう。このエクスチェンジ エフェクトによるフロントエンド マウス ポインタのインタラクションについて話しましょう。皆さんのお役に立てれば幸いです。
元のマウス ポインター スタイルを必要な効果に変更し、特別なインタラクティブ効果を追加します。 [推奨される学習: css ビデオ チュートリアル ]
まず最初の質問です。これは図で確認できます。上記では、マウス ポインタのスタイルがドットに変更されています:
# 通常は次のようになります:
# もちろん、これは比較的単純で、CSS では、
cursor スタイルを通じてマウス ポインターの形状を変更できます。
を使用します。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片,并且设置 fallback 兜底 */ cursor: url(hand.cur), pointer;これは誰もが知っておくべきことです。一般的に、さまざまなシナリオでさまざまなマウス ポインター スタイルを選択することも、ユーザー エクスペリエンスを向上させる方法です。
もちろん、この対話では、
cursor: none でカーソルを非表示にする
ここでは、cursor: none## でページのマウス ポインターを非表示にします。 #: { cursor: none; }
このようにして、ページ上のマウス ポインタが消えます:
グローバル イベント リスニングによるシミュレーションマウス ポインタ
の円形 div を実装し、
: <pre class="brush:php;toolbar:false"><div></div></pre>
<pre class="brush:php;toolbar:false">#g-pointer {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}</pre>
に基づいて絶対位置に設定します。次に、On でページでは、円形の黒い点が表示されます:
次に、イベント モニタリングを通じて、本文の 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
<div></div> <div></div>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 サイトの他の関連記事を参照してください。