Wie invertiere ich die Textfarbe beim Bewegen der Maus mithilfe von Clip-Path?

Textfarbe beim Bewegen der Maus umkehren

Die Frage stellt ein Szenario dar, in dem ein Benutzer die Farbe von schwarzem Text umkehren möchte, wenn er mit der Maus darüber fährt Verwenden eines benutzerdefinierten schwarzen Cursors, wie in einem bereitgestellten GIF demonstriert. Obwohl der Benutzer versucht hat, diesen Effekt mithilfe von CSS und JavaScript zu erzeugen, war dies erfolglos, da der Code nur den Cursor weiß machte, den schwarzen Text jedoch nicht invertierte.

Lösung

Die hier angebotene Lösung nutzt das Clip-Pfad-Konzept, um den gewünschten Effekt zu erzielen. Dabei wird der Text dupliziert, um zwei Ebenen zu erstellen, eine mit schwarzem Text und die andere mit weißem Text. Durch die Verwendung von Clip-Pfad und das Anpassen seiner Position basierend auf der Bewegung des Cursors kann die oberste Ebene angezeigt werden, wodurch die Farbe des Texts darunter umgekehrt wird.

Der folgende Code demonstriert diese Lösung:

<code class="javascript">var h = document.querySelector('h1');
var p = h.getBoundingClientRect();
var c = document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  /*Adjust the cursor position*/
  c.style.left = e.clientX + 'px';
  c.style.top = e.clientY + 'px';
  /*Adjust the clip-path*/
  h.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

<code class="css">body {
  cursor: none;
}
h1 {
  color: #000;
  display: inline-block;
  margin: 50px;
  text-align: center;
  position: relative;
}
h1:before {
  position: absolute;
  content: attr(data-text);
  color: #fff;
  background: #000;
  clip-path: circle(20px at var(--x, -100%) var(--y, -100%));
}
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

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

<span class="cursor"></span></code>

In diesem Code enthält das h1-Element den schwarzen Text zusammen mit einer duplizierten Ebene darunter mit weißem Text. Der Clip-Pfad auf der obersten Ebene wird basierend auf der Position des Cursors angepasst, wodurch der weiße Text darunter sichtbar wird und die Farbe des schwarzen Textes effektiv invertiert wird.

Das obige ist der detaillierte Inhalt vonWie invertiere ich die Textfarbe beim Bewegen der Maus mithilfe von Clip-Path?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!