CSS マウスポインタインタラクション効果の詳細な調査-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-06-24 13:50:08

転載

2475 人が閲覧しました

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

元のマウスポインタースタイルを必要な効果に変更し、特別なインタラクティブ効果を追加します。 [推奨される学習: 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"><div></div></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 でページでは、円形の黒い点が表示されます:

次に、イベントモニタリングを通じて、本文の 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