Comment créer un effet de couleur de texte inversé au survol de la souris avec CSS et JavaScript ?

Inverser la couleur du texte au survol de la souris

Le but est d'inverser la couleur d'un élément de texte tout en le survolant avec un curseur noir. L'effet doit être similaire au GIF suivant :

[GIF démontrant l'effet]

Pour obtenir cet effet avec CSS et JavaScript, nous utiliserons une combinaison de techniques :

1. Créez un calque de texte en double : Dupliquez l'élément de texte et positionnez-le directement au-dessus de l'original. Inversez la couleur du calque de texte dupliqué en blanc.
2. Utilisez le chemin de détourage pour révéler le calque supérieur : Utilisez un chemin de détourage pour définir une zone circulaire qui révélera le calque de texte inversé. .
3. Écoutez les mouvements de la souris : Lorsque l'utilisateur déplace le curseur sur le texte, ajustez la position du tracé du clip pour qu'elle corresponde au mouvement du curseur.

Voici un exemple d'implémentation :

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

En combinant ces techniques, nous pouvons créer l'effet d'inversion de couleur de texte souhaité au survol de la souris.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!