动态登陆按钮

最新推荐文章于 2023-06-13 22:01:13 发布

xiaoxiao涛

最新推荐文章于 2023-06-13 22:01:13 发布

阅读量337

点赞数

分类专栏：前端文章标签：动态登陆按钮

本文链接：https://blog.csdn.net/qq_40571533/article/details/98309211

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css\style.css">
</head>

<body>
    <button class="login">
        <p>LOGIN</p>
        <div class="loading">
            <div></div>
            <div></div>
            <div></div>
        </div>

        <!-- 使用svg绘制 -->
        <svg class='checkmark' width='30px' height='30px' stroke='white' fill='none'>
            <polyline points='2,10 12,18 28,2'></polyline>
        </svg>
    </button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $($('.login').click(
        function () {
            if (!$(this).hasClass('active')) {
                $(this).toggleClass('active');
                setTimeout(
                    () => {
                        $(this).addClass('verity');
                    }, 2000
                )
            }
        }
    ))
</script>

</html>

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* button style start */
.login {
    position: relative;
    border: none;
    outline: none;

    width: 12rem;
    height: 5rem;
    border-radius: 5rem;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    box-shadow: 0 8px 28px black;
    cursor: pointer;

    transition: .5s;
}

.active .login {
    width: 5rem;
    color: transparent;
}

/* button style end */

/* loading style start */
.loading {
    opacity: 0;
    transition: .5s;
}

.active .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 70%;
    height: 40%;

    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    opacity: 1;
}

.active .loading div {
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background-color: #fff;

    animation: .9s loading ease-in-out infinite alternate;
}

@keyframes loading {
    to {
        transform: translate(0, -1rem);
    }
}

.active .loading div:nth-child(2) {
    animation-delay: .2s;
}

.active .loading div:nth-child(3) {
    animation-delay: .4s;
}

.verity .loading {
    opacity: 0;
}

/* loading style end */

/* checkmark style start */
.checkmark {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    stroke-width: 2px;
    /* 利用stroke的虚线和偏移值达到加载的动画效果 */
    stroke-dasharray: 36px;
    stroke-dashoffset: 36px;
}

.verity .checkmark {
    animation: .6s show forwards;
    animation-delay: .4s;
}

@keyframes show {
    to {
        stroke-dashoffset: 0;
    }
}

/* checkmark style end */

稍微解析一下：
三个点是三个div实现，√是通过svg绘制的。

xiaoxiao涛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态登陆按钮

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫