这样看是不是一目了然呢~ 😏

如上👆gif👆效果可以理解为👉 以鼠标位置为圆心，产生的背景圆，与box的间隙产生的交叉

• 效果只在boxes区域出现，是不是需要判断鼠标位置来添加粉色背景圆呢 ❓
• 而且这个只有在接触到 box 才会有 粉色背景圆，box 以外的部分是没有颜色的，这个又如何解决呢 ❓
• 或许也能实现，应该会麻烦些 :)

给每个box添加背景圆，背景圆位置 根据鼠标位置变化，👇 如下所示 👇

背景圆大小固定(比如200px)，圆心位置如何确定呢？

👉 初始位置 (0,0) ，参照系则是参考box左上角；

👉 动态变化的位置取(clientX - left, clientY - top)。left 和 top 即 box 元素相对浏览器视口的位置，通过 getBoundingClientRect 方法获取

👉 取差值(clientX - left, clientY - top)也很好理解，因为伪元素位置是参照box左上的位置变化，这样就能在 差值(绝对值) < 半径 的时候出现在 box间隙内

• 盒子元素 box 添加伪元素 before，设置伪元素宽高均大于父元素，效果上类似于伪元素覆盖了box，同时设置偏移量 inset为负值，实现 “居中覆盖”（这样就能留出一个"空隙", 即👆gif👆中粉色圆填充before 与 box 中间空白的部分）
• 给伪元素背景设置背景色，demo中用的是 径向渐变，渐变的形状为200px 的圆形，圆心位置记为 --x 和 --y，通过css变量传入，颜色自定义即可（demo中采用的是rgba(245,158,11,.7) 到 transparent 的渐变）不用粉色了🤣

• 记录鼠标位置 (mouseX, mouseY)
• calBoxesPosition方法获取每个box 的位置 (left,top) 并记录差值 (mouseX - left, mouseY - top)
• (mouseX, mouseY) 变动的时候重新触发 calBoxesPosition 方法即可

• 第一次页面加载调用 calBoxesPosition 后，在不滑动页面的情况下，每个box位置相对固定，可以缓存下来位置信息，避免该函数内部频繁调用 getBoundingClientRect 引发的性能问题造成卡顿
• 在滑动页面的时候，可以将记录box位置信息的字段重置为(0,0)，再移动鼠标重新触发 calBoxesPosition 即可

PS: 不太会使用掘金的代码片段，不知道如何引入第三方库😅，如果验证代码， @vueuse/core 和 tailwindcss请自行安装🫠

（等我查一下怎么使用，再回来贴个代码片段~ ⏰@ 4-17 14:56 ）

2. css样式