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

本文主要是介绍【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>