如何实现鼠标追踪的background-clip:text渐变文字悬停效果？

这个效果完全可行，你的代码失效是因为background-clip: text的应用对象错误，以及存在语法问题。

问题分析 #

• 你把background-clip: text加在了::after伪元素上，但伪元素是独立的图层，无法裁剪到父元素的文字内容上，所以渐变效果无法显示在文字里。
• 代码中*-webkit-background-clip这种带*的写法是错误的，正确的前缀写法不需要额外添加*。

修正后的完整代码 #

HTML #

<a class="shiny" href="">BIG AND BOLD TEXT</a>

CSS #

.shiny {
  position: relative;
  display: inline-block;
  color: black;
  padding: 10px 15px;
  background: #3984ff;
  border-radius: 10px;
  font-weight: bold;
  font-size: 33px;
  overflow: hidden;
  /* 定义跟随鼠标的渐变背景 */
  background-image: radial-gradient(circle, #ffd700, #ff6b6b 80%);
  background-position: calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px);
  background-size: 200px 200px;
  background-repeat: no-repeat;
  /* 开启文字背景裁剪 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 过渡效果让切换更自然 */
  transition: color 0.3s ease;
}

.shiny:hover {
  /* 悬停时文字透明，露出渐变背景 */
  color: transparent;
}

JavaScript #

const button = document.querySelector(".shiny");

button.addEventListener("mousemove", (e) => {
  const { x, y } = button.getBoundingClientRect();
  // 计算鼠标在元素内的相对位置，让渐变中心对齐鼠标
  button.style.setProperty("--x", e.clientX - x - 100);
  button.style.setProperty("--y", e.clientY - y - 100);
});

关键细节说明 #

1. 把渐变背景直接绑定在文字元素上，通过background-position结合自定义属性--x/--y控制位置，实现跟随鼠标移动的效果。
2. 默认状态下，color: black会覆盖背景裁剪的效果，文字保持黑色；悬停时将color设为transparent，渐变背景就会通过background-clip: text显示在文字区域内。
3. 调整背景尺寸和位置偏移量（减100），让渐变中心刚好对齐鼠标位置，视觉效果更自然。

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