登陆与注册的窗体切换

快来打我* 2022-05-24 02:18 236阅读 0赞

一开始在写自己的注册登录的切换时用的页面跳转，觉得过于简单没有创造性，于是当然前往各大社区浏览。经过一番查询找到一个不错的登录与注册的窗体切换。

我简单添加了一个验证窗体左右抖动效果，下面直接贴上代码。

##### CSS #####

.center {
    			text-align: center;
    		}
    
    		.login-page {
    			width: 360px;
    			padding: 8% 0 0;
    			margin: auto;
    		}
    
    		.form {
    			position: relative;
    			z-index: 1;
    			background: #FFFFFF;
    			max-width: 360px;
    			margin: 0 auto 100px;
    			padding: 45px;
    			text-align: center;
    			box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    		}
    
    		.form input {
    			font-family: "Roboto", sans-serif;
    			outline: 0;
    			background: #f2f2f2;
    			width: 100%;
    			border: 0;
    			margin: 0 0 15px;
    			padding: 15px;
    			box-sizing: border-box;
    			font-size: 14px;
    		}
    
    		.form button {
    			font-family: "Microsoft YaHei", "Roboto", sans-serif;
    			text-transform: uppercase;
    			outline: 0;
    			background: #4CAF50;
    			width: 100%;
    			border: 0;
    			padding: 15px;
    			color: #FFFFFF;
    			font-size: 14px;
    			-webkit-transition: all 0.3 ease;
    			transition: all 0.3 ease;
    			cursor: pointer;
    		}
    
    		.form button:hover,
    		.form button:active,
    		.form button:focus {
    			background: #43A047;
    		}
    
    		.form .message {
    			margin: 15px 0 0;
    			color: #b3b3b3;
    			font-size: 12px;
    		}
    
    		.form .message a {
    			color: #4CAF50;
    			text-decoration: none;
    		}
    
    		.form .register-form {
    			display: none;
    		}
    
    		.container {
    			position: relative;
    			z-index: 1;
    			max-width: 300px;
    			margin: 0 auto;
    		}
    
    		.container:before,
    		.container:after {
    			content: "";
    			display: block;
    			clear: both;
    		}
    
    		.container .info {
    			margin: 50px auto;
    			text-align: center;
    		}
    
    		.container .info h1 {
    			margin: 0 0 15px;
    			padding: 0;
    			font-size: 36px;
    			font-weight: 300;
    			color: #1a1a1a;
    		}
    
    		.container .info span {
    			color: #4d4d4d;
    			font-size: 12px;
    		}
    
    		.container .info span a {
    			color: #000000;
    			text-decoration: none;
    		}
    
    		.container .info span .fa {
    			color: #EF3B3A;
    		}
    
    		body {
    			background: #76b852;
    			/* fallback for old browsers */
    			background: -webkit-linear-gradient(right, #76b852, #8DC26F);
    			background: -moz-linear-gradient(right, #76b852, #8DC26F);
    			background: -o-linear-gradient(right, #76b852, #8DC26F);
    			background: linear-gradient(to left, #76b852, #8DC26F);
    			font-family: "Roboto", sans-serif;
    			-webkit-font-smoothing: antialiased;
    			-moz-osx-font-smoothing: grayscale;
    		}
    
    		.shake_effect {
    			-webkit-animation-name: shake;
    			animation-name: shake;
    			-webkit-animation-duration: 1s;
    			animation-duration: 1s;
    		}
    
    		@-webkit-keyframes shake {
    			from,
    			to {
    				-webkit-transform: translate3d(0, 0, 0);
    				transform: translate3d(0, 0, 0);
    			}
    
    			10%,
    			30%,
    			50%,
    			70%,
    			90% {
    				-webkit-transform: translate3d(-10px, 0, 0);
    				transform: translate3d(-10px, 0, 0);
    			}
    
    			20%,
    			40%,
    			60%,
    			80% {
    				-webkit-transform: translate3d(10px, 0, 0);
    				transform: translate3d(10px, 0, 0);
    			}
    		}
    
    		@keyframes shake {
    			from,
    			to {
    				-webkit-transform: translate3d(0, 0, 0);
    				transform: translate3d(0, 0, 0);
    			}
    
    			10%,
    			30%,
    			50%,
    			70%,
    			90% {
    				-webkit-transform: translate3d(-10px, 0, 0);
    				transform: translate3d(-10px, 0, 0);
    			}
    
    			20%,
    			40%,
    			60%,
    			80% {
    				-webkit-transform: translate3d(10px, 0, 0);
    				transform: translate3d(10px, 0, 0);
    			}
    		}
    
    		p.center {
    			color: #fff;
    			font-family: "Microsoft YaHei";
    		}

##### HTML #####

<div class="htmleaf-container">
    		<p class="center">登录用户名为：xzj，密码为123</p>
    		<p class="center">在用户名和密码错误时，点击登录按钮可以看到表单的摇晃效果。</p>
    		<div id="wrapper" class="login-page">
    			<div id="login_form" class="form">
    				<form class="register-form">
    					<input type="text" placeholder="用户名" id="r_user_name" />
    					<input type="password" placeholder="密码" id="r_password" />
    					<input type="text" placeholder="电子邮件" id="r_emial" />
    					<button id="create">创建账户</button>
    					<p class="message">已经有了一个账户?
    						<a href="#">立刻登录</a>
    					</p>
    				</form>
    				<form class="login-form">
    					<input type="text" placeholder="用户名" id="user_name" />
    					<input type="password" placeholder="密码" id="password" />
    					<button id="login">登　录</button>
    					<p class="message">还没有账户?
    						<a href="#">立刻创建</a>
    					</p>
    				</form>
    			</div>
    		</div>
    	</div>

##### JS #####

代码简单，效果美观。

参考代码：[点击打开链接][Link 1]

![20180518141427848][]

[Link 1]: https://stackoverflow.com/questions/48999762/remember-input-values-when-toggle-form
[20180518141427848]: /images/20220524/cb2871c15b0f475f93b33466152c2f7b.png