前言

无意中在Nuxt官网发现一组高亮卡片元素的效果，发现还挺好看的，就自己试着写了一下，下面是Nuxt官网效果图,边框会随着鼠标移动，并且周围的卡片也会“染上”。

我实现的效果如下

实现过程

写好六个卡片

下面看代码，先用HTML写六个div元素，并设置好基础样式。

    <div class="box">
<div class="col">
<div class="element">
<div class="mask">
div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
<div class="col">
<div class="element">
<div class="mask">div>
div>
div>
div>

body {
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background-color: #0D1428;

}

.box {
width: 1200px;
display: flex;
flex-wrap: wrap;

}

.col {
width: calc((100% - 4 * 20px) / 4);
height: 180px;
padding: 10px;

}
.element {
background: #172033;
height: 100%;
position: relative;
border-radius: 10px;

}

JS获取卡片坐标距离鼠标坐标的距离

使用JS获取每一个卡片坐标距离鼠标坐标的距离，并将这个值设置到元素的style中作为一个变量。

var elements = document.getElementsByClassName("element");
// 添加鼠标移动事件监听器
document.addEventListener("mousemove", function (event) {
// 获取鼠标位置
var mouseX = event.pageX;
var mouseY = event.pageY;

// 遍历元素并输出距离鼠标的坐标
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var rect = element.getBoundingClientRect();
var elementX = rect.left + window.pageXOffset;
var elementY = rect.top + window.pageYOffset;

var distanceX = mouseX - elementX;
var distanceY = mouseY - elementY;

// 将距离值设置到每一个卡片元素上面

        element.style.setProperty('--x', distanceX + 'px');

        element.style.setProperty('--y', distanceY + 'px');

    }

});

我们检查控制台可以看到，值已经设置上去了，并且随着鼠标的移动，这个值是在不断变化的。

给元素设置径向渐变

随后我们在element这个伪元素上设置一个径向渐变的CSS效果, 径向渐变的圆心坐标为当前元素距离当前鼠标坐标的距离。再使用mask遮罩，只留出3px的距离作为渐变效果展示。

.element::before {
content: '';
position: absolute;
width: calc(100% + 3px);
height: calc(100% + 3px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
background: radial-gradient(250px circle at var(--x) var(--y),#00DC82 0,transparent 100%);;

    }
.element .mask {
position: absolute;

    inset: 3px;
background: #172033;
border-radius: 10px;


}

至此，效果就完全实现啦