点击抽奖，流动边框

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #eee;
        }

        .btn {
            /* border: 1px solid #d49dbf; */
            width: 300px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            color: #d49dbf;
            font-size: 30px;
            letter-spacing: 10px;
            /* text-shadow: 0 0 4px #fff; */
            position: relative;
            overflow: hidden;
        }


        .btn div {
            position: absolute;
            background-color: #d49dbf;
        }

        .btn .left {
            width: 100%;
            height: 4px;
            top: 0;
            left: -100%;
            animation: leftRun 2s linear 0s infinite;
        }

        @keyframes leftRun {
            0% {
                left: -100%;

            }

            50%,
            100% {
                left: 100%;
            }
        }

        .top {
            width: 4px;
            height: 100%;
            top: -100%;
            right: 0;
            animation: topRun 2s linear 0.5s infinite;
        }

        @keyframes topRun {
            0% {
                top: -100%;

            }

            50%,
            100% {
                top: 100%;
            }
        }

        .right {
            width: 100%;
            height: 4px;
            bottom: 0;
            right: -100%;
            animation: rightRun 2s linear 1s infinite;
        }

        @keyframes rightRun {
            0% {
                right: -100%;

            }

            50%,
            100% {
                right: 100%;
            }
        }

        .bottom {
            width: 4px;
            height: 100%;
            bottom: -100%;
            left: 0;
            animation: bottomRun 2s linear 1.5s infinite;
        }

        @keyframes bottomRun {
            0% {
                bottom: -100%;

            }

            50%,
            100% {
                bottom: 100%;
            }
        }
    </style>
</head>

<body>

    <div class="btn">
        <span>点击抽奖</span>
        <div class="left"></div>
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>

</body>

</html>
 
 
 

 

posted @ 2022-04-28 14:31  蠡li  阅读(21)  评论(0)  编辑  收藏  举报