边框动画单边追随

最新推荐文章于 2024-04-26 17:12:00 发布

龙丨行

最新推荐文章于 2024-04-26 17:12:00 发布

阅读量405

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33592641/article/details/131798433

版权

在这里插入图片描述

时间短就直接看第三个使用 clip-path + animation 完成。

<!DOCTYPE html>
<html>

<head>
    <style>
        /* 第一个 */
        .btn {
            width: 100px;
            height: 40px;
            background: yellow;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            margin-left: 50px;
            margin-top: 50px;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            width: 200%;
            height: 200%;
            background-color: red;
            animation: move 3s infinite linear;
            transform-origin: 0 0;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        .btn::after {
            content: '';
            position: absolute;
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            background-color: green;
        }

        .btn .name {
            z-index: 1;
        }


        @keyframes move {
            to {
                transform: rotate(1turn);
            }
        }



        /* 第二个 */

        .borderShow {
            width: 150px;
            height: 70px;
            margin: 30px;
            position: relative;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid red;
            display: flex;
            justify-content: space-around;
            align-items: center;

            &::after {
                content: '';
                position: absolute;
                top: 2px;
                left: 2px;
                width: calc(100% - 4px - 12px);
                height: calc(100% - 4px - 12px);
                text-align: center;
                border: 6px solid white;
                border-radius: 4px;
                background-color: #fff;
                animation: showRound 3s infinite linear;

            }



            /* 内部的盒子 */
            .borderShowCenter {
                position: absolute;
                top: 8px;
                left: 8px;
                width: calc(100% - 4px - 12px);
                height: calc(100% - 4px - 12px);
                text-align: center;
                border-radius: 4px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: #fff;
                background-color: #c073ed;
                z-index: 10;
                /* 覆盖伪元素 */
            }
        }

        @keyframes showRound {

            /* box-shadow : x轴 y轴 模糊 放大 颜色; */
            0%,
            100% {
                box-shadow: 0px -66px 0px 0px #c073ed;
                /* 上 */
            }

            25% {
                box-shadow: 146px 0px 0px 0px #c073ed;
                /* 右 */
            }

            50% {
                box-shadow: 0px 66px 0px 0px #c073ed;
                /* 下 */
            }

            75% {
                box-shadow: -146px 0px 0px 0px #c073ed;
                /* 左 */
            }
        }



        /* 第三 */

        .clippath_wrap {
            /* width: 150px; */
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border: 2px solid gold;
                animation: clippath 3s infinite linear;     

                border-radius: 5px
            }
        }

        @keyframes clippath {

            0%,
            100% {
                clip-path: inset(0 0 95% 0);
            }

            25% {
                clip-path: inset(0 95% 0 0);
            }

            50% {
                clip-path: inset(95% 0 0 0);
            }

            75% {
                clip-path: inset(0 0 0 95%);
            }
        }
    </style>
</head>

<body>


    <div class="btn"> <span class="name">按钮名称</span></div>



    <div class="borderShow">
        <div class="borderShowCenter">按钮</div>
    </div>


    <div class="clippath_wrap">第三个按钮</div>

</body>

</html>