Wie erzielt man mithilfe von CSS-Clippfaden und JavaScript einen Hover-Effekt mit umgekehrter Textfarbe?

Textfarbe beim Bewegen der Maus mithilfe von CSS und JavaScript umkehren

Um den gewünschten Hover-Effekt zu erzielen, bei dem schwarzer Text in Weiß umgewandelt wird, während die Farbe beibehalten wird Durch das Erscheinen eines schwarzen Cursors können wir die Funktionen von CSS-Clippfaden mit der JavaScript-Ereignisbehandlung kombinieren.

Der Ansatz besteht darin, zwei Textebenen zu erstellen: die primäre Textebene und eine invertierte Textebene. Die invertierte Textebene wird hinter der primären Textebene positioniert und ihre Textfarbe ist auf Weiß eingestellt.

Mit JavaScript erfassen wir die Mausbewegung und passen den Clip-Pfad der invertierten Textebene dynamisch an. Wenn Sie die Maus bewegen, wird der Clippfad angepasst, um mehr vom invertierten Text anzuzeigen, wodurch die Illusion entsteht, dass der Primärtext seine Farbe umkehrt.

Hier ist eine Aufschlüsselung der wichtigsten Codekomponenten:

<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>

Beispielcode:

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

Ergebnis:

Wenn Sie mit der Maus über den Text „WORK“ fahren, wird der Schwarzer Text wird allmählich weiß, wenn sich der Mauszeiger bewegt.

Das obige ist der detaillierte Inhalt vonWie erzielt man mithilfe von CSS-Clippfaden und JavaScript einen Hover-Effekt mit umgekehrter Textfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!