CSS と JavaScript を使用して、マウス ホバー時に反転したテキストの色の効果を作成する方法

マウス ホバー時にテキストの色を反転

この効果には、カスタムの黒のカーソルをその上に置くと、黒のテキストの色が反転します。 CSS と JavaScript を使用してこれを実現する方法は次のとおりです。

テキストを複製して、テキストの色が反対の上下に 2 つのレイヤーを作成します。 1 つのレイヤーは背景として機能し、もう 1 つは反転した色として使用されます。

CSS の位​​置: 絶対を使用して、2 つのテキスト レイヤーを正確に重ねて配置します。

クリップを使用します。 - 反転したカラーレイヤー上のパスを使用して、テキストの目的の部分を表示します。クリップパスの値は、マウスの位置に基づいて動的に変化します。

マウスの動きを追跡するための JavaScript イベント リスナーを実装します。カーソルが移動すると、カーソル位置とテキスト要素の間のオフセットが計算されます。

計算されたオフセットを使用してクリップパスの値を更新し、目的の領域で反転した色を表示します。

マウスの動きに基づいてクリップパスを調整すると、反転色の効果が得られます。カーソルの色も黒に設定する必要があることに注意してください。

以上がCSS と JavaScript を使用して、マウス ホバー時に反転したテキストの色の効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。