Comment obtenir un effet de survol de couleur de texte inversé à l'aide de chemins de clips CSS et de JavaScript ?

Inverser la couleur du texte au survol de la souris à l'aide de CSS et JavaScript

Pour obtenir l'effet de survol souhaité, où le texte noir s'inverse en blanc tout en conservant le apparition d'un curseur noir, nous pouvons combiner les capacités des chemins de clips CSS avec la gestion des événements JavaScript.

L'approche consiste à créer deux couches de texte : la couche de texte principale et une couche de texte inversée. Le calque de texte inversé est positionné derrière le calque de texte principal et sa couleur de texte est définie sur blanc.

À l'aide de JavaScript, nous capturons le mouvement de la souris et ajustons dynamiquement le chemin de détourage du calque de texte inversé. Au fur et à mesure que la souris se déplace, le chemin du clip est ajusté pour révéler davantage de texte inversé, créant l'illusion du texte principal inversant sa couleur.

Voici une répartition des composants clés du code :

<code class="css">/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}</code>

<code class="javascript">// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top) + 'px');
  h1.style.setProperty('--y', (e.clientY - p.left) + 'px');
};</code>

Exemple de code :

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

Résultat :

Lorsque vous survolez le texte "WORK", le le texte noir passera progressivement au blanc à mesure que le curseur de la souris se déplace.

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!