css 四角边框移动效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了css 四角边框移动效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

块是长宽相等的正方形，大小浏览器分辨率变化而变化
利用平移变化translate来时实现边框到达鼠标划到的块，坐标是鼠标滑到块的offsetLeft和offsetTop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    body {
        background-color: goldenrod;
    }

    .box {
        width: 80%;
        /* padding: 30px 20px; */
        margin: 50px auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
        background-color: goldenrod;
        position: relative;

    }

    .item {
        aspect-ratio: 1/1;
        background-color: cyan;
    }

    .item img {
        /* margin: 0;
        padding: 0; */
        display: block;
        width: 100%;
        height: 100%;
    }

    .pointer {
        cursor: pointer;
        position: absolute;
        /*线条的粗细*/
        --t: 3px;
        /*线条的长*/
        --l: 30px;
        /*线条离块的距离*/
        --g: 20px;
        /*块的大小*/
        --s: 400px;
        /*遮罩层的x坐标*/
        --x: 0px;
        /*遮罩层的y坐标*/
        --y: 0px;
        width: calc(var(--s) + 2 * var(--g));
        height: calc(var(--s) + 2 * var(--g));
        left: 0;
        top: 0;
        border: var(--t) solid #fff;
        margin-left: calc(-1 * var(--g));
        margin-top: calc(-1 * var(--g));
        transform: translate(var(--x), var(--y));
        transition: 0.5s;
        -webkit-mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75% 100%) 0 0/calc(100% - var(--l)) calc(100% - var(--l));
    }
</style>

<body>
    <div class="box">
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="item">
            <img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                alt="">
        </div>
        <div class="pointer"></div>
    </div>

</body>
<script>
    const items = document.querySelectorAll('.box .item')
    const pointer = document.querySelector('.pointer')
    for (const item of items) {
        item.onmouseenter = function () {
            const width = item.clientWidth
            const x = item.offsetLeft
            const y = item.offsetTop
            pointer.style.setProperty('--s', width + 'px')
            pointer.style.setProperty('--x', x + 'px')
            pointer.style.setProperty('--y', y + 'px')
        }
    }
</script>

</html>