Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich mit CSS und JavaScript einen invertierten Textfarbeffekt beim Bewegen der Maus?

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

DDD
DDDOriginal
2024-10-28 04:10:30278Durchsuche

How to create an inverted text color effect on mouse hover with CSS and JavaScript?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn