Comment inverser la couleur du texte lors du survol de la souris à l'aide de Clip-Path ?

Inverser la couleur du texte au survol de la souris

La question présente un scénario dans lequel un utilisateur souhaite inverser la couleur du texte noir lors du survol en utilisant un curseur noir personnalisé, comme démontré dans un GIF fourni. Bien que l'utilisateur ait tenté de créer cet effet à l'aide de CSS et de JavaScript, il n'a pas réussi, le code ne faisant que rendre le curseur blanc mais n'inversant pas le texte noir.

Solution

La solution proposée ici utilise le concept de clip-path pour obtenir l'effet souhaité. Il s’agit de dupliquer le texte pour créer deux calques, l’un avec du texte noir et l’autre avec du texte blanc. En utilisant clip-path et en ajustant sa position en fonction du mouvement du curseur, le calque supérieur peut être révélé, inversant la couleur du texte en dessous.

Le code suivant illustre cette solution :

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

Dans ce code, l'élément h1 contient le texte noir ainsi qu'un calque en double en dessous avec du texte blanc. Le chemin du clip sur le calque supérieur est ajusté en fonction de la position du curseur, révélant le texte blanc en dessous et inversant efficacement la couleur du texte noir.

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!