利用css变量去实现渐变的跟随鼠标

效果展示

原理：

1、CSSStyleDeclaration.setProperty()

CSSStyleDeclaration.setProperty()提供了可以直接修改CSS属性值的能力。当然也支持修改CSS中的变量。

:root {
        --color: red;
      }
      div {
        color: var(--color);
      }
    <div>div</div>

此时的字体颜色是红色
执行document.body.style.setProperty('--color', 'blue');字体颜色就会变成蓝色。

2、mousemove
mousemove 可以监听鼠标是否在元素上移动。

3、getBoundingClientRect
getBoundingClientRect用来获取当前元素的大小以及相对于视窗的位置。

实现的过程

创建一个div，当鼠标在这个div移动的时候，会出现渐变。

<div id="container"></div>

定义式样

设置宽高，同时定义两个变量 --x 和–y。这里设置了 overflow: hidden;是必须设置的！

#container {
    width: 100px;
    height: 100px;
    background-color: #202344;
    position: relative;
    --x: 0px;
    --y: 0px;
    overflow: hidden;
}

创建渐变
既然是要跟随鼠标的渐变，那么就需要第二个元素定义即可。这里可以选择子div，也可以选择伪元素。这里考虑到性能的原因，我是用的伪元素。

#container:before {
      content: "";
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: 0;
      height: 0;
      background: radial-gradient(circle closest-side, pink, transparent);
      transform: translate(-50%, -50%);
  }

radial-gradient()函数用径向渐变创建 “图像”。

shape	确定圆的类型:
	circle ：指定圆形的径向渐变
	ellipse (默认): 指定椭圆形的径向渐变。
size	定义渐变的大小，可能值：
	farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
	closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
	closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
	farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值：
	center（默认）：设置中间为径向渐变圆心的纵坐标值。
	top：设置顶部为径向渐变圆心的纵坐标值。
	bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色。

初始状态是left:0,top:0,宽高都是0。这里设置transform: translate(-50%, -50%);是为了鼠标在伪元素的中心。

当鼠标开始再容器上移动，设置伪元素宽高：设置的宽高都是大于容器的，这样看上去就是容器的渐变。

#container:hover:before {
    width: 200px;
    height: 200px;
}

这个时候呈现出来的效果就是这样的

把伪元素与鼠标关联起来
上面的伪元素我们设置了left和top都使用的是变量，所以只要通过mouseover事件，实时获取鼠标的位置，然后再修改–x和–y这两个变量。

window.onload = () => {
            let container = document.getElementById("container");
            container.addEventListener("mousemove", (e) => {
                console.log("鼠标在动");
                let rect = e.target.getBoundingClientRect();
                let x = e.clientX - rect.left;
                let y = e.clientY - rect.top;
                container.style.setProperty("--x", x + "px");
                container.style.setProperty("--y", y + "px");
            });
        }

最后呈现的效果就是