Wie erstelle ich mit CSS und JavaScript einen invertierten Textfarbeffekt beim Bewegen der Maus?

Textfarbe beim Bewegen der Maus umkehren

Das Ziel besteht darin, die Farbe eines Textelements umzukehren, während Sie mit einem schwarzen Cursor darüber fahren. Der Effekt sollte dem folgenden GIF ähneln:

[GIF, das den Effekt demonstriert]

Um diesen Effekt mit CSS und JavaScript zu erzielen, verwenden wir eine Kombination von Techniken:

1. Erstellen Sie eine duplizierte Textebene: Duplizieren Sie das Textelement und positionieren Sie es direkt über dem Original. Kehren Sie die Farbe der duplizierten Textebene in Weiß um.
2. Verwenden Sie den Clip-Pfad, um die oberste Ebene anzuzeigen: Verwenden Sie einen Clip-Pfad, um einen kreisförmigen Bereich zu definieren, der die invertierte Textebene sichtbar macht .
3. Achten Sie auf Mausbewegungen:Wenn der Benutzer den Cursor über den Text bewegt, passen Sie die Position des Clippfads an die Bewegung des Cursors an.

Hier ist eine Beispielimplementierung:

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

Durch die Kombination dieser Techniken können wir den gewünschten Textfarbumkehreffekt beim Bewegen der Maus erzeugen.

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