如何使用 CSS 剪辑路径和 JavaScript 实现反转文本颜色悬停效果？

使用 CSS 和 JavaScript 反转鼠标悬停时的文本颜色

为了实现所需的悬停效果，其中黑色文本反转为白色，同时保持黑色光标的外观，我们可以将 CSS 剪辑路径的功能与 JavaScript 事件处理结合起来。

该方法包括创建两层文本：主文本层和反转文本层。倒置文本图层位于主文本图层后面，并将其文本颜色设置为白色。

使用 JavaScript，我们捕获鼠标移动并动态调整倒置文本图层的剪辑路径。当鼠标移动时，剪辑路径会进行调整以显示更多反转的文本，从而产生主要文本反转其颜色的错觉。

以下是关键代码组件的细分：

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

示例代码：

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

结果：

当您将鼠标悬停在“WORK”文本上时，随着鼠标光标的移动，黑色文本会逐渐变成白色。

以上是如何使用 CSS 剪辑路径和 JavaScript 实现反转文本颜色悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！