巧用CSS变量实现渐变跟随鼠标

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

之前写过两篇关于CSS变量的文章《CSS中的变量》和《带有类型和默认值的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 可以监听鼠标是否在元素上移动。

addEventListener('mousedown')

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%);
  }

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

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

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

实现思路

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

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");
});

效果：

渐变跟随鼠标.gif

扫码送书

作为一个前端，我个人觉得node是必学的。所以这次送一本node的书籍：《Node.js入门指南》作者是司明岳，阿里云社区专家，GitChat专栏作者，开源社区的参与者与推动者，参与开发多个开源项目，本书分为10章及讲解了node的基础，包括文件，网络数据库等等。同时也有实践，介绍Express.js +vue的一个前后端分离项目、

京东自营购买链接