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

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

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

マウス スタイルの変更

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

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

# もちろん、これは比較的単純で、CSS では、

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

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

cursor CSS プロパティは、マウス ポインターのタイプを設定し、マウス ポインターが移動したときに対応するスタイルを表示します。要素の上にカーソルを置きます。

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

これは誰もが知っておくべきことです。一般的に、さまざまなシナリオでさまざまなマウス ポインター スタイルを選択することも、ユーザー エクスペリエンスを向上させる方法です。

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

カーソルを設定しようとしているわけではありません。とにかく、その逆で、それを隠す必要があります。

cursor: none でカーソルを非表示にする

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

{
    cursor: none;
}

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

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

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

10px x 10px

の円形 div を実装し、

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#g-pointer {     position: absolute;     top: 0;     left: 0;     width: 10px;     height: 10px;     background: #000;     border-radius: 50%; }</pre><div class="contentsignin">ログイン後にコピー</div></div> に基づいて絶対位置に設定します。次に、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 サイトの他の関連記事を参照してください。