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 サイトの他の関連記事を参照してください。