Cool highlight card effects

Preface

I accidentally found the effect of a set of highlighted card elements on the Nuxt official website, and found that it was pretty good-looking, so I tried to write it myself, and the following is a rendering of the Nuxt official website, the border will move with the mouse, and the surrounding cards will also be "dyed".

Here's what I've achieved

Implementation process

Write six cards

Let's look at the code, first write six div elements in HTML, and set the basic style.

<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 gets the distance between the card coordinates and the mouse coordinates

Use JS to get the distance between each card coordinate and the mouse coordinate, and set this value to the style of the element as a variable.

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');
    }
});
           

When we check the console, we can see that the value has been set up, and it is constantly changing as we move the mouse.

Sets a radial gradient to an element

Then we set a CSS effect of a radial gradient on the pseudo-element element, and the center coordinate of the radial gradient is the distance between the current element and the current mouse coordinates. Then use a mask to leave only 3px away as a gradient effect.

.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;

}
           

At this point, the effect is fully realized

Original link: https://juejin.cn/post/7301266090750115877