【css】伪元素实现跟随鼠标移动的渐变效果

主要功能是在按钮上实现鼠标跟随渐变效果。每当用户将鼠标移动到按钮上时，按钮会显示一个以鼠标位置为中心的渐变效果。

1. 核心部分: 监听鼠标在元素内移动

监听鼠标在元素内移动，并触发该事件。

const handleMouseMove = (e: MouseEvent) => {
  if (btnRef.value) {
      // 获取按钮相对于视口的位置和尺寸
      let rect = btnRef.value.getBoundingClientRect();
      let x = e.clientX - rect.left;
      let y = e.clientY - rect.top;
      //   将鼠标的相对位置设置为按钮的 CSS 自定义属性
      btnRef.value!.style.setProperty("--x", x + "px");
      btnRef.value!.style.setProperty("--y", y + "px");
  }
};

• getBoundingClientRect()：获取按钮相对于视口的位置和尺寸。
• 计算鼠标相对于按钮的位置：x 和 y 分别表示鼠标在按钮内的相对 x 和 y 坐标。
• 设置 CSS 自定义属性 (–x 和 --y)：通过 btnRef.value.style.setProperty("--x", x + "px") 等语句，将鼠标的相对位置设置为按钮的 CSS 自定义属性。

2. 核心部分：伪元素实现渐变：

::before 伪元素用于创建一个随鼠标移动的渐变圆形。

/* 创建一个随鼠标移动的渐变圆形 */
.btn-mouse::before {
  /* 初始状态半径为0，不可见 */
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* 使得渐变圆心位于鼠标位置 */
  width: var(--size);
  height: var(--size);
  /* 实现圆形渐变效果，颜色从粉色过渡到透明 */
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
/* 当按钮被悬浮时，半径扩大渐变圆，使其可见 */
.btn-mouse:hover::before {
  --size: 200px;
}

• left: var(--x); top: var(--y);使得渐变圆心位于鼠标位置。
• 初始状态：--size: 0; 表示渐变圆初始大小为 0，不可见。
• 悬停状态：当按钮被悬停时，--size: 200px 扩大渐变圆，使其可见。
• 渐变效果：通过 radial-gradient(circle closest-side, pink, transparent) 实现圆形渐变效果，颜色从粉色过渡到透明

3. 全部代码：

<template>
  <div class="p-24">
    <button class="btn-mouse" @mousemove="handleMouseMove" ref="btnRef">
      <span>Hover me</span>
    </button>
  </div>
</template>
<script setup lang="ts">
const btnRef = ref<HTMLElement | null>(null);
const handleMouseMove = (e: MouseEvent) => {
  if (btnRef.value) {
    // 获取按钮相对于视口的位置和尺寸
    let rect = btnRef.value.getBoundingClientRect();
    let x = e.clientX - rect.left;
    let y = e.clientY - rect.top;
    //   将鼠标的相对位置设置为按钮的 CSS 自定义属性
    btnRef.value!.style.setProperty("--x", x + "px");
    btnRef.value!.style.setProperty("--y", y + "px");
  }
};
</script>
<style scoped>
.btn-mouse {
  position: relative;
  background: #49a7ff;
  padding: 8px 16px;
  font-size: 18px;
  color: white;
  cursor: pointer;
  border: none;
  outline: none;
  /* 跟随鼠标移动的渐变圆形。超出部分隐藏*/
  overflow: hidden;
}

.btn-mouse span {
  position: relative;
}
/* 创建一个随鼠标移动的渐变圆形 */
.btn-mouse::before {
  /* 初始状态半径为0，不可见 */
  --size: 0;
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* 使得渐变圆心位于鼠标位置 */
  width: var(--size);
  height: var(--size);
  /* 实现圆形渐变效果，颜色从粉色过渡到透明 */
  background: radial-gradient(circle closest-side, pink, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
/* 当按钮被悬浮时，半径扩大渐变圆，使其可见 */
.btn-mouse:hover::before {
  --size: 200px;
}
</style>