标签搜索
隐藏侧边栏

用CSS变量整一个渐变跟随鼠标

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 35 阅读 / 1,769 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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;
}

image-20211122215035347

创建渐变

既然是要跟随鼠标的渐变,那么就需要第二个元素定义即可。这里可以选择子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;
}

image-20211122215229720

实现思路

上面的伪元素我们设置了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");
});

效果:

渐变跟随鼠标

0

评论区