炫酷的高亮卡片效果

前言

無意中在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