如何实现自定义跟随光标覆盖时仅下方文字变色的效果

要实现仅鼠标圆圈覆盖区域的文字变黑、其余保持白色的效果，我们可以利用**CSS径向渐变+background-clip: text**结合动态CSS变量的方式，无需复杂图层遮罩即可达成需求。

修改后的完整代码 #

HTML

<div><p>X</p><p>Hello World</p></div>
<section class="mouseFollowCircle" id="circle"></section>

CSS

body {
  background-image: linear-gradient(red, yellow);
  overflow: hidden;
  margin: 0;
}

div {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20%;
  z-index: 2;
}

:root {
  --trans-bounce: cubic-bezier(.4,2.2,.6,1.0);
  --trans-time: .4s;
  --mouse-x: 0px;
  --mouse-y: 0px;
  --circle-radius: 15px;
}

p {
  color: transparent;
  font-size: 30px;
  background-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    black 0%,
    black var(--circle-radius),
    white var(--circle-radius),
    white 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.mouseFollowCircle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  position: absolute;
  z-index: 3;
  top: -15px;
  left: -15px;
  box-shadow: 0 0 10px white;
  background-color: white;
  pointer-events: none;
  transition: width var(--trans-time) var(--trans-bounce), height var(--trans-time) var(--trans-bounce), top var(--trans-time) var(--trans-bounce), left var(--trans-time) var(--trans-bounce), background-color var(--trans-time) var(--trans-bounce);
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  top: -35px;
  left: -35px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(move);
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    // 更新鼠标位置和圆圈半径的CSS变量
    document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
    document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);

    const isTextElement = ['P', 'A', 'BUTTON'].includes(e.target.tagName) || e.target.parentNode.tagName === 'BUTTON';
    if (isTextElement) {
      interBubble.classList.add('big');
      document.documentElement.style.setProperty('--circle-radius', '35px');
    } else {
      interBubble.classList.remove('big');
      document.documentElement.style.setProperty('--circle-radius', '15px');
    }
  });

  move();
});

关键实现细节 #

1. 文字颜色控制：通过background-clip: text将径向渐变背景裁剪成文字形状，渐变圆心跟随鼠标位置，半径与圆圈大小同步，实现仅圆圈覆盖区域显示黑色文字。
2. CSS变量动态更新：在鼠标移动和元素 hover 时，实时更新--mouse-x、--mouse-y和--circle-radius变量，让渐变效果与圆圈光标完全同步。
3. 层级调整：将圆圈光标z-index设为3，确保它显示在文字上方，同时文字的渐变颜色透过白色圆圈清晰可见。

内容的提问来源于stack exchange，提问作者Owen Anderson