分享一个按钮动画效果，边框旋转，闪过一道光的效果。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .button-animation {
            align-items: center;
            animation: border-glint--K_SFVkOnnAzSsAUT 4s linear infinite backwards;
            animation-delay: 1s;
            background-clip: padding-box, border-box;
            background-color: #fd2f70;
            background-image: linear-gradient(to bottom right, #fd2f70, #fd2f70), linear-gradient(125deg, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, .6) 50%, hsla(0, 0%, 100%, 0) 53%);
            background-origin: border-box;
            background-position: 0, -250px;
            background-size: 100%, 200%;
            border: 3px solid transparent;
            border-radius: 10px;
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .14);
            color: #fff;
            display: flex;
            font-size: 22px;
            font-weight: 600;
            height: 60px;
            justify-content: center;
            line-height: 32px;
            overflow: hidden;
            position: relative;
            width: 180px;
            z-index: 1;
        }

        .button-animation:after {
            animation: glint--T_al5iHMf8JL_lRa 4s linear infinite backwards;
            animation-delay: -3s;
            background-image: linear-gradient(125deg, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, .4) 50%, hsla(0, 0%, 100%, 0) 52%);
            content: " ";
            height: 200%;
            left: -120%;
            position: absolute;
            top: -50%;
            width: 200%;
        }


        @keyframes border-glint--K_SFVkOnnAzSsAUT {
            0% {
                background-position: 0, -250px;
            }

            25% {
                background-position: 0, -200px;
            }

            75% {
                background-position: 0, 50px;
            }

            100% {
                background-position: 0, 50px;
            }
        }

        @keyframes glint--T_al5iHMf8JL_lRa {
            0% {
                left: -120%;
            }

            8% {
                left: 50%;
            }

            100% {
                left: 50%;
            }
        }

    </style>
</head>

<body>
    <div class="wrapper--YFF6K44FMWnfyf8x ">
        <div class="button-animation">立即登录</div>
    </div>
</body>

</html>

posted @ 2025-07-31 13:30 义美-小义阅读(17) 评论(0) 收藏举报

刷新页面返回顶部

小义博客

小义博客

分享一个按钮动画效果，边框旋转，闪过一道光的效果。

公告