【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>
相关推荐
dr李四维4 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_18 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~25 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ28 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z34 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴37 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue