🌐 原地址 👉 h3

🫰 demo 🫰

🧐 思路分析 🧐

原理.gif

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

如上👆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 的渐变）~~不用粉色了🤣~~

👀 关于`--x` 和 `--y` 的获取 👀

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

🚀 关于一些优化 🚀

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

👨‍💻代码(vue3实现)👨‍💻

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

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

template 结构

<template>
  <div class="w-full h-full p-8 bg-white dynamic-bg-page overflow-auto">
    <!-- 鼠标位置 -->
    <p class="text-center mb-4 font-bold text-xl">
      mouseX: {{ mouseX }}, mouseY: {{ mouseY }}
    </p>

    <!-- boxes -->
    <div
      class="box-container grid grid-cols-3 gap-8"
      :style="{
        '--border-color': 'rgb(229,229,229)',
        '--bg-color': 'rgba(245,158,11,.7)',
      }"
    >
      <div
        v-for="(_, i) in Array.from({ length: 10 })"
        :key="i"
        class="box flex items-center justify-center p-[1px] rounded-xl"
      >
        <div
          class="inner w-full h-full bg-white rounded-xl hover:bg-opacity-70 transition-[background-opacity]"
        ></div>
      </div>
    </div>
  </div>
</template>

css样式

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 200px;
  border: 1px solid var(--border-color);
  border-radius: 12px;

  &::before {
    position: absolute;
    display: block;
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 12px;
    inset: -2px;
    background: radial-gradient(
      200px circle at var(--x) var(--y),
      var(--bg-color) 0,
      transparent 100%
    );
    will-change: background;
  }
}
</style>

js 部分

<script setup lang="ts">
import { useMouse } from '@vueuse/core'
import { onMounted } from 'vue'

const { x: mouseX, y: mouseY } = useMouse()

const calBoxesPosition = (e: MouseEvent) => {
  const { clientX, clientY } = e
  const items = document.querySelectorAll('.box')
  items.forEach((i) => {
    const { x, y } = i.getBoundingClientRect()
    i.setAttribute('style', `--x: ${clientX - x}px; --y: ${clientY - y}px`)
  })
}

onMounted(() => {
  window.addEventListener('mousemove', (e) => {
    calBoxesPosition(e)
  })
})
</script>

一个鼠标滑过的样式~