登录框

发布于 2020-02-10  239 次阅读

展示地址：http://show.cqdefxxx.com/login/index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <link rel="stylesheet" href="style.css">
        <style>
            *{
                margin:0;
                padding: 0;
                text-decoration:none;
                font-family: montserrat;
                box-sizing: border-box;
            }
            
            body{
                min-height: 100vh;
                background-image: linear-gradient(120deg,#44cef6,#003371);
            }
            
            .login-form{
                width:360px;
                background: #f1f1f1;
                height: 580px;
                padding:80px 40px;
                border-radius: 10px;
                position:absolute;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
            }
            
            .login-form h1{
                text-align: center;
                margin-bottom: 60px;
            }
            
            .txtb{
                border-bottom: 2px solid #adadad;
                position:relative;
                margin:30px 0; 
            }
            
            .txtb input{
                font-size:15px;
                color:#333;
                border:none;
                width:100%;
                outline:none;
                background: none;
                padding:0 5px;
                height:40px;
            }
            
            .txtb span::before{
                content:attr(data-placeholder);
                position:absolute;
                top:50%;
                left:5px;
                color:#adadad;
                transform: translateY(-50%);
                z-index:-1;
                transition:.5s;
            }
            
            .txtb span::after{
                content:"";
                position:absolute;
                top:100%;
                left:0;
                width:0%;
                height:2px;
                background-image: linear-gradient(120deg,#44cef6,#003371);
                transition: .5s;   
            }
            
            .focus + span::before{
                top:-5px;
            }
            
            .focus + span::after{
                width:100%;
            }
            
            .loginbtn{
                display: block;
                width:100%;
                height: 50px;
                border: none;
                background-image: linear-gradient(120deg,#44cef6,#003371,#44cef6);
                background-size: 200%;
                color:#fff;
                outline:none;
                cursor:pointer;
                transition:.5s;
            }
            
            .loginbtn:hover{
                background-position: right;
            }
            
            .bottom-text{
                margin-top:60px;
                text-align: center;
                font-size:20px;
            }
        </style>
        <script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
	</head>
	<body>
        <form action="index.html" class="login-form">
            <h1>Login</h1>
            <div class="txtb">
                <input type="text">
                <span data-placeholder="User"></span>
            </div>
            
            <div class="txtb">
                <input type="password">
                <span data-placeholder="Password"></span>
            </div>
            
            <input type="submit" class="loginbtn" value="login">
            
            <div class="bottom-text">
                Don't have account? <a href="#">Sing Up</a>
            </div>
            
        </form>
        <script type="text/javascript">
            $(".txtb input").on("focus",function(){
                $(this).addClass("focus");
            })
            $(".txtb input").on("blur",function(){
                if ($(this).val() == "") $(this).removeClass("focus");
            })
        </script>
	</body>
</html>

 

注错之当