使用CSS变量和JavaScript实现鼠标跟随渐变

实现鼠标跟随渐变效果的详细过程:

1. HTML 结构

我们在 HTML 中创建了一个 <div> 元素,用于展示渐变效果。这个元素的 ID 是 gradient-box,方便在 JavaScript 中进行操作。

2. CSS 样式

  • CSS 变量 :在 :root 中定义了两个 CSS 变量 --mouse-x--mouse-y,用于存储鼠标位置的百分比值。这些变量会被用于控制渐变的中心位置。
  • 渐变背景div 元素的背景设置为径向渐变(radial-gradient),其中心位置由 --mouse-x--mouse-y 控制。初始值为 50%,即居中显示。

3. JavaScript 逻辑

  • 事件监听 :为 div 元素添加 mousemove 事件监听器。当鼠标在 div 上移动时,会触发 updateMousePosition 函数。
  • 计算鼠标位置
    • 使用 getBoundingClientRect() 获取 div 元素的边界信息。
    • 计算鼠标在 div 内的相对位置,并将其转换为百分比值。
  • 更新 CSS 变量
    • 使用 style.setProperty() 方法,将计算得到的百分比值更新到 --mouse-x--mouse-y 变量上。
    • 由于这些变量直接影响 div 的背景渐变,因此每次鼠标移动时,渐变的中心位置都会实时更新。

4. 整体效果

通过上述步骤,div 元素的背景渐变会根据鼠标在其上的位置动态变化,形成一个跟随鼠标移动的视觉效果。这种实现方式利用了 CSS 变量的动态特性和 JavaScript 的事件处理能力,使得效果流畅且易于维护。

代码如下

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --mouse-x: 50%;
            --mouse-y: 50%;
        }
        div {
            width: 1200px;
            height: 1200px;
            cursor: pointer;
            border: 1px solid #6794ee;
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            rgba(10, 34, 243, 0.5),
            rgba(255, 0, 0, 0.2));
        }
    </style>
</head>
<body>
    <div id="gradient-box">
    </div>

    <script>
        // 修正函数定义
        function updateMousePosition(event) {
            const rect = event.currentTarget.getBoundingClientRect();
            const mouseX = ((event.clientX - rect.left) / rect.width) * 100;
            const mouseY = ((event.clientY - rect.top) / rect.height) * 100;
            document.documentElement.style.setProperty('--mouse-x', `${mouseX}%`);
            document.documentElement.style.setProperty('--mouse-y', `${mouseY}%`);
        }

        // 添加事件监听
        const gradientBox = document.getElementById('gradient-box');
        gradientBox.addEventListener('mousemove', updateMousePosition);
    </script>
</body>
</html>
相关推荐
Never_Satisfied1 天前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
拉不动的猪1 天前
函数组件和异步组件
前端·javascript·面试
淮北4941 天前
html + css +js
开发语言·前端·javascript·css·html
掘金安东尼1 天前
Transformers.js:让大模型跑进浏览器
开发语言·javascript·ecmascript
@PHARAOH1 天前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER1 天前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
DokiDoki之父1 天前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
RickyWasYoung1 天前
【matlab】字符串数组 转 double
android·java·javascript
万少1 天前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
3秒一个大1 天前
掌握 Stylus:让 CSS 编写效率倍增的预处理器
css