CSS クリップパスと JavaScript を使用して、反転したテキストの色のホバー効果を実現するにはどうすればよいですか?

CSS と JavaScript を使用してマウス ホバー時のテキストの色を反転する

目的のホバー効果を実現するには、黒のテキストが白に反転しますが、黒いカーソルが表示されるように、CSS クリップパスの機能と JavaScript イベント処理を組み合わせることができます。

このアプローチは、プライマリ テキスト レイヤーと反転テキスト レイヤーの 2 つのテキスト レイヤーを作成することで構成されます。反転テキスト レイヤーはプライマリ テキスト レイヤーの背後に配置され、テキストの色は白に設定されています。

JavaScript を使用して、マウスの動きをキャプチャし、反転テキスト レイヤーのクリップ パスを動的に調整します。マウスが動くと、クリップパスが調整され、反転されたテキストがより多く表示され、主要なテキストの色が反転しているように見えます。

主要なコード コンポーネントの内訳は次のとおりです。

<code class="css">/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

<code class="javascript">// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h1.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

コード例:

<code class="html"><h1 data-text="WORK">WORK</h1>
<span class="cursor"></span></code>

結果:

「WORK」テキストの上にカーソルを置くと、マウス カーソルが移動すると、黒いテキストが徐々に白に変わります。

以上がCSS クリップパスと JavaScript を使用して、反転したテキストの色のホバー効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。