主要功能是在按钮上实现鼠标跟随渐变效果。每当用户将鼠标移动到按钮上时,按钮会显示一个以鼠标位置为中心的渐变效果。
1. 核心部分: 监听鼠标在元素内移动
监听鼠标在元素内移动,并触发该事件。
javascript
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
伪元素用于创建一个随鼠标移动的渐变圆形。
css
/* 创建一个随鼠标移动的渐变圆形 */
.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. 全部代码:
html
<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>