Wie invertiere ich die Textfarbe beim Bewegen der Maus mit CSS und JavaScript?

Textfarbe beim Bewegen der Maus umkehren

Dieses GIF zeigt den gewünschten Effekt:

[GIF von Text, der weiß wird Mauszeiger]

Dieser Effekt kann mit CSS und JS erstellt werden. Eine Methode besteht darin, den Clip-Pfad einer duplizierten Textebene zu manipulieren, um die invertierte Farbe beim Schweben anzuzeigen.

<code class="css">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%));
}</code>

<code class="js">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>

Wenn sich die Maus bewegt, passt das Skript den Clip-Pfad an, um mehr davon anzuzeigen invertierter Text, wodurch der Hover-Effekt entsteht.

Das obige ist der detaillierte Inhalt vonWie invertiere ich die Textfarbe beim Bewegen der Maus mit CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!