前言
在掘金逛到这篇文章（一个鼠标滑过的样式~ - 掘金 (juejin.cn)），模拟实现h3 - The Web Framework for Modern JavaScript Era (unjs.io)的鼠标滑动样式，如下。但仔细看，掘金这篇文章和原处的实现的效果不太一致，于是自己研究了一下，大程度上还原了。
我实现的
直接上代码
用的vue3模板，自行转换
<template>
<div class="container">
<div class="container-item" v-for="item in 8" :key="item">
<div class="container-item-content"></div>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue'
// 获取鼠标位置
const calBoxesPosition = e => {
const { clientX, clientY } = e
const items = document.querySelectorAll('.container-item')
items.forEach(i => {
const { x, y } = i.getBoundingClientRect()
i.setAttribute('style', `--x: ${clientX - x}px; --y: ${clientY - y}px`)
})
}
onMounted(() => {
window.addEventListener('mousemove', calBoxesPosition)
})
</script>
<style lang="scss" scoped>
.container {
--color-background: 23 23 23;
--color-font: #fff;
--color-border: #222222;
--bg-color: #2dd4bf;
--bg-opacity: 1;
width: 1500px;
padding: 20px;
height: 800px;
background-color: rgb(var(--color-background));
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
.container-item {
color: var(--color-font);
border-radius: 12px;
box-shadow: 0 0 1px 1px var(--color-border);
position: relative;
transition: background 0.5s ease-in-out;
&::before {
position: absolute;
display: block;
content: '';
z-index: 2;
width: calc(100% + 4px);
height: calc(100% + 4px);
inset: -2px;
border-radius: 12px;
background: radial-gradient(250px circle at var(--x) var(--y), var(--bg-color) 0, transparent 100%);
will-change: background;
}
.container-item-content {
border-radius: 12px;
background-color: rgb(var(--color-background) / var(--bg-opacity));
width: 100%;
position: relative;
z-index: 3;
padding: 20px;
height: 100%;
&:hover {
--bg-opacity: 0.9;
}
}
}
}
</style>
重点分析
伪元素：before
&::before {
position: absolute;
display: block;
content: '';
z-index: 2;
width: calc(100% + 4px);
height: calc(100% + 4px);
inset: -2px;
border-radius: 12px;
background: radial-gradient(250px circle at var(--x) var(--y), var(--bg-color) 0, transparent 100%);
will-change: background;
}
为了实现container-item元素周围鼠标滑动的炫光，需要用一个比它大的盒子包围它，这里用伪元素，width和height是父元素的100%+4px，再通过inset整体偏移回去2px，则可实现包围container-item，2px的空隙可存放炫光。
炫光形成：
以鼠标为圆心，做一圆，半径为250px，颜色渐变.伪元素背景为radial-gradient，渐变起始点为圆心，终点为透明。当鼠标靠近container-item时，圆在伪元素可视区域内，颜色渐变，形成炫光。
确定圆心：
实时通过鼠标的位置坐标，拿到鼠标到container-item的距离，因为是伪元素是对container-item相对定位的,因此不能直接用鼠标的位置坐标为圆心
will-change 是一个CSS属性，它允许开发者告知浏览器某些元素将要发生的变化，以便浏览器可以提前进行优化，从而在变化实际发生时提供更平滑的动画和过渡效果。
z-index
需注意的是，z-index生效的条件是，元素有定位，且不是static。 container-item下面还有一层container-item-content，该元素撑大充满container-item，并且z-index要比伪元素大，将伪元素与container-item交叉区域覆盖，伪元素的炫光就只在周围出现。当鼠标移入container-item时，可通过：hover将container-item-content的背景颜色opacity降低一点，就会出现淡淡的炫光效果在item内。
