滑动的炫酷登录注册页面

孤留光乩

已于 2024-06-03 10:55:42 修改

阅读量236

点赞数 7

分类专栏：前端文章标签：前端 css3 javascript jquery html5 动画

于 2024-05-31 17:20:06 首次发布

本文链接：https://blog.csdn.net/weixin_74268571/article/details/139259779

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

在Web开发中，登录和注册页面是网站或应用程序的重要组成部分。为了提高用户体验和安全性，开发人员通常会采用各种方法来改进登录注册页面的设计。滑动式登录注册页面是一种常见的解决方案，它不仅提供了更好的用户友好性。本文将介绍如何创建一个滑动式登录注册页面。

整体效果

喜欢的可以点点关注收藏一下

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
	<style type="text/css">
		* {
		    box-sizing: border-box;
		}
		body {
		    font-family: 'Montserrat',sans-serif;
		    background-image: linear-gradient(120deg,#3498db,#8e44ad);;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    height: 100vh;
		    margin: -20px 0 50px;
		}
		
		h1 {
		    font-weight: bold;
		    margin: 0;
		}
		p {
		    font-size: 14px;
		    line-height: 20px;
		    letter-spacing: .5px;
		    margin: 20px 0 30px;
		}
		span {
		    font-size: 12px;
		}
		a {
		    color: #333;
		    font-size: 14px;
		    text-decoration: none;
		    margin: 15px 0;
		}
		.container {
		    background: #fff;
		    border-radius: 10px;
		    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
		    position: relative;
		    overflow: hidden;
		    width: 768px;
		    max-width: 100%;
		    min-height: 480px;   
		
		}
		
		.form-container form {
		    background: #fff;
		    display: flex;
		    flex-direction: column;
		    padding: 0 50px;
		    height: 100%;
		    justify-content: center;
		    text-align: center;
		}
		.social-container {
		    margin: 20px 0;
		}
		
		.social-container a {
		    border: 1px solid #ddd;
		    border-radius: 50%;
		    display: inline-flex;
		    justify-content: center;
		    align-items: center;
		    margin: 0 5px;
		    height: 40px;
		    width: 40px;
		}
		
		.social-container a:hover {
		    background-color: #eee;
		
		}
		
		.txtb {
		    border-bottom: 2px solid #adadad;
		    position: relative;
		    margin: 10px 0;
		}
		
		.txtb input {
		    font-size: 15px;
		    color: #333;
		    border: none;
		    width: 100%;
		    outline: none;
		    background: none;
		    padding: 0 3px;
		    height: 35px;
		}
		
		.txtb span::before {
		    content: attr(data-placeholder);
		    position: absolute;
		    top: 50%;
		    left: 5px;
		    color: #adadad;
		    transform: translateY(-50%);
		    transition: .5s;
		}
		.txtb span::after {
		    content: '';
		    position: absolute;
		    left: 0%;
		    top: 100%;
		    width: 0%;
		    height: 2px;
		    background-image: linear-gradient(120deg,#3498db,#8e44ad);
		    transition: .5s;
		}
		
		.focus + span::before {
		    top: -5px;
		}
		
		.focus + span::after {
		    width: 100%;
		}
		
		button {
		    border-radius: 20px;
		    border: 1px solid #ff4b2b;
		    background: #ff4b2b;
		    color: #fff;
		    font-size: 12px;
		    font-weight: bold;
		    padding: 12px 45px;
		    letter-spacing: 1px;
		    text-transform: uppercase;
		    transition: transform 80ms ease-in;
		    cursor: pointer;
		}
		
		button:active {
		    transform: scale(.95);
		}
		
		button:focus {
		    outline: none;
		}
		
		button.ghost {
		    background: transparent;
		    border-color: #fff;
		}
		
		.form-container {
		    position: absolute;
		    top: 0;
		    height: 100%;
		    transition: all .6s ease-in-out;
		}
		
		.form-container button {
		    background: linear-gradient(120deg, #3498db, #8e44ad);
		    border: none;
		    background-size: 200%;
		    color: #fff;
		    transition: .5s;
		}
		
		.form-container button:hover {
		    background-position: right;
		}
		
		.sign-in-container {
		    left: 0;
		    width: 50%;
		    z-index: 2;
		}
		.sign-in-container form a {
		    position: relative;
		    left: 100px;
		}
		.sign-up-container {
		    left: 0;
		    width: 50%;
		    z-index: 1;
		    opacity: 0;
		}
		.sign-up-container button {
		    margin-top: 20px;
		}
		.overlay-container {
		    position:absolute;
		    top: 0;
		    left: 50%;
		    width: 50%;
		    height: 100%;
		    overflow: hidden;
		    transition: transform .6s ease-in-out;
		    z-index: 100;
		}
		.overlay {
		    background-image: linear-gradient(120deg,#3498db,#8e44ad);
		    color: #fff;
		    position: relative;
		    left: -100%;
		    height: 100%;
		    width: 200%;
		    transform: translateY(0);
		    transition: transform .6s ease-in-out;
		}
		.overlay-panel {
		    position: absolute;
		    top: 0;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    padding: 0 40px;
		    height: 100%;
		    width: 50%;
		    text-align: center;
		    transform: translateY(0);
		    transition: transform .6s ease-in-out;
		}
		.overlay-right {
		    right: 0;
		    transform: translateY(0);
		    
		}
		
		.overlay-left {
		    transform: translateY(-20%);
		}
		
		.container.right-panel-active .sign-in-container {
		    transform: translateY(100%);
		}
		
		.container.container.right-panel-active .overlay-container {
		    transform: translateX(-100%);
		}
		.container.right-panel-active .sign-up-container {
		    transform: translateX(100%);
		    opacity: 1;
		    z-index: 5;
		}
		.container.container.right-panel-active .overlay {
		    transform: translateX(50%);
		}
		.container.container.right-panel-active .overlay-left {
		    transform: translateY(0);
		}
		.container.container.right-panel-active .overlay-right {
		    transform: translateY(20%);
		}
	</style>
</head>
<body>
<div class="container" id="login-box">


    <div class="form-container sign-up-container">
        <form>
            <h1>注册</h1>           
            <div class="txtb">
                <input type="text">
                <span data-placeholder="昵称" ></span>
            </div>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="账号" ></span>
            </div> 
            <div class="txtb">
                <input type="password">
                <span data-placeholder="密码" ></span>
            </div>
            <div class="txtb">
                <input type="password">
                <span data-placeholder="确认密码" ></span>
            </div>            
            <button>注册</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>登录</h1>
            <div class="txtb">
                <input type="email">
                <span data-placeholder="账号" ></span>
            </div>
            <div class="txtb">
                <input type="password" >
                <span data-placeholder="密码"></span>
            </div>
            <a href="#">忘记密码？</a>
            <button>登录</button>
        </form>
    </div>

    <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>已有账号？</h1>
                    <p>请使用您的账号进行登录</p>
                    <button class="ghost" id="signIn" >登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>没有账号?</h1>
                    <p>立即注册加入我们，和我们一起开始旅程吧</p>
                    <button class="ghost" id="signUp">注册</button>
                </div>
            </div>
        
    </div>
</div>
</body>
<script>
    $("#signUp").click(function(){
        $("#login-box").addClass('right-panel-active')
    })

    $("#signIn").click(function(){
        $("#login-box").removeClass('right-panel-active')
    })

    $(".txtb input").on("focus",function(){
        $(this).addClass("focus")
    })

    $(".txtb input").on("blur",function(){
        if($(this).val() == '')
        $(this).removeClass("focus")
    })

</script>
</html>