ホームページ  >  記事  >  ウェブフロントエンド  >  CSS マウス ポインタ インタラクション効果の詳細な調査

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

青灯夜游
青灯夜游転載
2022-06-24 13:50:082418ブラウズ

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

元のマウス ポインター スタイルを必要な効果に変更し、特別なインタラクティブ効果を追加します。 [推奨される学習: 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 を実装し、

: <pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt;</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 でページでは、円形の黒い点が表示されます:

次に、イベント モニタリングを通じて、本文の CSS マウス ポインタ インタラクション効果の詳細な調査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 サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。