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

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

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>
相关推荐
别拿曾经看以后~22 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死25 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试28 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人36 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人37 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR42 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香44 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter