炫酷的高亮卡片效果

前言

无意中在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;

}
           

至此，效果就完全实现啦

原文链接：https://juejin.cn/post/7301266090750115877