【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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-form中使用v-model和prop实现动态校验

如何在Vue的el-form中使用v-model和prop实现动态校验&#xff0c;包括多个变量控制校验、数组循环校验和字段级条件显示。通过实例演示了如何配合rules和自定义验证函数来确保表单的完整性和有效性。 公式&#xff1a; 动态校验项的v-model的绑定值 el-form的属性 :model的值 …

多系统萎缩不慌张,这些维生素是你的“守护神”✨

亲爱的朋友们&#xff0c;今天我们来聊聊一个可能不太为人熟知但至关重要的健康话题——多系统萎缩&#xff08;MSA&#xff09;。面对这样的挑战&#xff0c;除了医疗治疗&#xff0c;日常的营养补充也是不可或缺的一环。特别是维生素&#xff0c;它们在我们的身体中扮演着举足…

CuponesController : ControllerBase

目录 一、CuponesController : ControllerBase 二、CuponesController : ControllerBase 三、CuponesController : ControllerBase 四、CuponesController : ControllerBase 五、CuponesController : ControllerBase 一、CuponesController : ControllerBase namespace A…

FastGPT+ollama 搭建私有AI大模型智能体工作流-Mac

一、大模型工作流的优势 1. 降低任务门槛&#xff1a;工作流可以将复杂任务分解成多个小任务&#xff0c;降低每个任务的复杂度&#xff0c;从而减少对提示词和大模型推理能力的依赖。这样可以提升大模型处理复杂任务的性能和容错能力。 2. 提升任务效率&#xff1a;工作流可以…

【OpenHarmony】openharmony移植到RK3568------获取源码编译OpenHarmony源码

一、源码获取 源码获取有好几种方式&#xff0c;在这里直接在镜像网站下载源码&#xff0c;点击下面连接下载全量版本的OpenHarmony4.1 https://repo.huaweicloud.com/openharmony/os/4.1-Release/code-v4.1-Release.tar.gz 将源码放到自己建立的目录下解压&#xff0c;我放…

PHP轻创推客集淘客地推任务平台于一体的综合营销平台系统源码

&#x1f680;轻创推客&#xff0c;营销新纪元 —— 集淘客与地推任务于一体的全能平台&#x1f310; &#x1f308;【开篇&#xff1a;营销新潮流&#xff0c;轻创推客引领未来】 在瞬息万变的营销世界里&#xff0c;你还在为寻找高效、全面的营销渠道而烦恼吗&#xff1f;&…

[Meachines] [Easy] jerry Tomcat用户暴力破解+war包webshell上传

信息收集 IP AddressOpening Ports10.10.10.95TCP:8080 $ sudo masscan -p1-65535 10.10.10.95 --rate1000 -e tun0 > /tmp/ports $ ports$(cat /tmp/ports | awk -F " " {print $4} | awk -F "/" {print $1} | sort -n | tr \n , | sed s/,$//) $ …

理解Flink数据流图

前言 在大数据处理的世界里,Apache Flink 已经成为处理实时数据流的一个强大工具。Flink 提供了一种高度灵活的方法来构建复杂的数据处理管道,其核心是所谓的 DataFlow 图模型。本文将带你深入了解 Flink DataFlow 图的基础知识,帮助你理解它是如何工作的以及如何利用它来构…

微服务——远程调用

为什么需要远程调用&#xff1f; 在微服务架构中&#xff0c;每个服务都是独立部署和运行的&#xff0c;它们之间需要相互协作以完成复杂的业务逻辑。因此&#xff0c;远程调用成为微服务之间通信的主要方式。通过远程调用&#xff0c;一个服务可以请求另一个服务执行某些操作或…

【前端面试】操作系统

进程与线程 进程线程定义是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位是进程中的一个实体&#xff0c;是CPU调度和分派的基本单位&#xff0c;共享进程的资源资源分配拥有独立的内存空间和系统资源共享进程的内存和资源开销…

Educational Codeforces Round 169 (Rated for Div. 2)

前言 电脑显示屏一闪一闪地感觉要拿去修了&#xff0c;比赛时重启了好几次。 手速场&#xff0c;E 题没学过 Sprague-Grundy 吃了亏&#xff0c;好在前四题都一发过才不至于掉分。 Standings&#xff1a;1214 题目链接&#xff1a;Dashboard - Educational Codeforces Round 16…

【架构设计】-- aarch(ARM) and X86

1、aarch(ARM) 架构 &#xff08;1&#xff09;操作系统支持&#xff1a;早期为 32 位操作系统&#xff0c;目前大部分都是 64 位操作系统 &#xff08;2&#xff09;全称&#xff1a;Advanced RISC Machine&#xff0c;由英国ARM Holdings plc公司开发 这种架构主要⽤于智能…

2.11、matlab中for循环,if else判断语句,break和continue用法以及switch case语句使用

1、前言 在MATLAB中,for循环用于迭代一个固定次数的循环。可以使用if else语句在循环中进行条件判断,根据条件的不同执行相应的代码块。break和continue可以用于控制循环的执行流程,break用于提前结束循环,而continue用于跳过当前循环迭代,继续下一次迭代。switch case语…

Android车载蓝牙音乐实例(附Demo源码):实现手机播放音乐后车机应用显示音乐名称,歌手,专辑名。且可控制上一曲下一曲,暂停播放功能

一、功能需求 功能需求是在Android10以上设备上实现蓝牙音乐功能&#xff0c;细分为两个功能点&#xff1a; 1、手机和车载设备实现蓝牙连接 &#xff08;本Demo文只做监听蓝牙连接状态&#xff0c;需手动到设置中连接蓝牙&#xff09; 2、连接蓝牙成功后手机播放音乐时车载…

Python常用内置函数(二)

Python 常用内置函数及示例&#xff08;续&#xff09; 在前面的基础上&#xff0c;我们将继续介绍另外50个常用的Python内置函数&#xff0c;并给出每个函数的简短说明和示例。 1. callable() 功能: 检查对象是否可调用。示例:def func(): pass print(callable(func)) # 输…

leetcode 递归(回溯)——java实现

递归算法与DFS类似&#xff0c;也与二叉树的先序遍历类似 以下摘自 leetcode回溯算法入门级详解 回溯法 采用试错的思想&#xff0c;它尝试分步的去解决一个问题。在分步解决问题的过程中&#xff0c;当它通过尝试发现现有的分步答案不能得到有效的正确的解答的时候&#xff…

了解蜜罐网络技术:网络安全中的诱捕与防御

在网络安全领域&#xff0c;攻击者和防御者之间的斗争日趋激烈。为了更好地识别、分析和抵御网络攻击&#xff0c;安全专家开发了一种称为蜜罐网络技术&#xff08;Honeypot Network Technology&#xff09;的防御策略。蜜罐网络不仅能够吸引攻击者进入虚假的环境&#xff0c;从…

MySQL笔记01: MySQL入门_1.2 MySQL下载安装与配置

2.2 MySQL下载安装与配置 2.2.1 MySQL下载 MySQL中文官网&#xff1a;https://www.mysql.com/cn/ MySQL英文官网&#xff1a;https://www.mysql.com/ MySQL官网下载地址&#xff1a;https://www.mysql.com/downloads/ &#xff08;1&#xff09;点击“MySQL Community (GPL) Do…

TinaSDKV2.0 自定义系统开发

TinaSDKV2.0 自定义系统开发 什么是自定义系统&#xff1f; TinaSDK Kconfig界面配置 Tina Linux采用 Kconfig 机制对 SDK 和内核进行配置。 Kconfig 是一种固定格式的配置文件。Linux 编译环境中的 menuconfig 程序可以识别这种格式的配置文件&#xff0c;并提取出有效信息…

catvod、TVBox源的解析过程分析和Spider参数覆盖问题解决

文章目录 TVBox官网源内容的结构 Spider参数覆盖问题Spider参数覆盖问题的解决脚本附录&#xff1a;核心代码分析首页详情页面播放界面获取播放信息源内容配置类Jar包解析类Js解析类Spider TVBox官网 TVBox项目索引&#xff1a;https://github.com/o0HalfLife0o/TVBoxOSC/ 完…