Fork me on GitHub

动态滑动登陆框-Html+Css+Js

动态滑动登陆框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>动态滑动登陆框</title>
        <link rel="stylesheet" href="index.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
        </script>
    </head>
    <body>
        
        <div class="show-login-btn"><i class="fas fa-arrow-alt-circle-right"></i>Show Login Form</div>
        
        <div class="login-box">
            <div class="hide-login-btn"><i class="fas fa-times-circle"></i></div>
            <form class="login-form" action="index.html" method="post">
                <h1>Welcome</h1>
                <input class="txtb" type="text" placeholder="Username"/>
                <input class="txtb" type="password" placeholder="Password" />
                <input class="login-btn" type="submit" value="Login" />
            </form>
        </div>
        <script>
            $(".show-login-btn").on("click",function() {
                $(".login-box").toggleClass("showed");
            });
            $(".hide-login-btn").on("click",function() {
                $(".login-box").toggleClass("showed");
            });
        </script>
    </body>
</html>

引用了Font Awesome网站字体，需要登陆邮箱才能显示图标。

body {
    margin: 0;
    padding: 0;
    background: #333;
}

.login-box {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(45deg, #9fbaa8, #F2E205);
    transition: 0.4s;
}

.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

.login-form h1 {
    font-weight: 400;
    margin-top: 0;
}

.txtb {
    display: block;
    box-sizing: border-box;
    width: 240px;
    background: #ffffff28;
    border: 1px solid white;
    padding: 10px 20px;
    color: white;
    outline: none;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

.login-btn {
    width: 240px;
    background: #003F63;
    border: 0;
    color: white;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

.hide-login-btn {
    color: #000;
    position: absolute;
    top: 40px;
    right: 40px;
    cursor: pointer;
    font-size: 24px;
    opacity: .7;
}

.show-login-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    border: 2px solid;
    padding: 10px;
    cursor: pointer;
}

.showed {
    left: 0;
}

 

posted @ 2021-03-15 18:06  ༺Tu༒aimes༻  阅读(48)  评论(0)  编辑  收藏  举报