css实现层叠式登录注册表单一体框切换代码-html代码-BFW代码库

css实现层叠式登录注册表单一体框切换代码

代码语言：html

代码描述：css实现层叠式登录注册表单一体框切换代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *,
        *::before,
        *::after {
        	box-sizing: border-box;
        }
        
        body {
        	margin: 0;
        	font-family: Roboto, -apple-system, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
        	background: #180148;
        }
        
        .forms-section {
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	align-items: center;
        }
        
        .section-title {
        	font-size: 32px;
        	letter-spacing: 1px;
        	color: #fff;
        }
        
        .forms {
        	display: flex;
        	align-items: flex-start;
        	margin-top: 30px;
        }
        
        .form-wrapper {
        	animation: hideLayer .3s ease-out forwards;
        }
        
        .form-wrapper.is-active {
        	animation: showLayer .3s ease-in forwards;
        }
        
        @keyframes showLayer {
        	50% {
        		z-index: 1;
        	}
        	100% {
        		z-index: 1;
        	}
        }
        
        @keyframes hideLayer {
        	0% {
        		z-index: 1;
        	}
        	49.999% {
        		z-index: 1;
        	}
        }
        
        .switcher {
        	position: relative;
        	cursor: pointer;
        	display: block;
        	margin-right: auto;
        	margin-left: auto;
        	padding: 0;
        	text-transform: uppercase;
        	font-family: inherit;
        	font-size: 16px;
        	letter-spacing: .5px;
        	color: #999;
        	background-color: transparent;
        	border: none;
        	outline: none;
        	transform: translateX(0);
        	transition: all .3s ease-out;
        }
        
        .form-wrapper.is-active .switcher-login {
        	color: #fff;
        	transform: translateX(90px);
        }
        
        .form-wrapper.is-active .switcher-signup {
        	color: #fff;
        	transform: translateX(-90px);
        }
        
        .underline {
        	position: absolute;
        	bottom: -5px;
        	left: 0;
        	overflow: hidden;
        	pointer-events: none;
        	width: 100%;
        	height: 2px;
        }
        
        .underline::before {
        	content: '';
        	position: absolute;
        	top: 0;
        	left: inherit;
        	display: block;
        	width: inherit;
        	height: inherit;
        	background-color: currentColor;
        	transition: transform .2s ease-out;
        }
        
        .switcher-login .underline::before {
        	transform: translateX(101%);
        }
        
        .switcher-signup .underline::before {
        	transform: translateX(-101%);
        }
        
        .form-wrapper.is-active .underline::before {
        	transform: translateX(0);
        }
        
        .form {
        	overflow: hidden;
        	min-width: 260px;
        	margin-top: 50px;
        	padding: 30px 25px;
          border-radius: 5px;
        	transform-origin: top;
        }
        
        .form-login {
        	animation: hideLogin .3s ease-out forwards;
        }
        
        .form-wrapper.is-active .form-login {
        	animation: showLogin .3s ease-in forwards;
        }
        
        @keyframes showLogin {
        	0% {
        		background: #d7e7f1;
        		transform: translate(40%, 10px);
        	}
        	50% {
        		transform: translate(0, 0);
        	}
        	100% {
        		background-color: #fff;
        		transform: translate(35%, -20px);
        	}
        }
        
        @keyframes hideLogin {
        	0% {
        		background-color: #fff;
        		transform: translate(35%, -20px);
        	}
        	50% {
        		transform: translate(0, 0);
        	}
        	100% {
        		background: #d7e7f1;
        		transform: translate(40%, 10px);
        	}
        }
        
        .form-signup {
        	animation: hideSignup .3s ease-out forwards;
        }
        
        .form-wrapper.is-active .form-signup {
        	animation: showSignup .3s ease-in forwards;
        }
        
        @keyframes showSignup {
        	0% {
        		background: #d7e7f1;
        		transform: translate(-40%, 10px) scaleY(.8);
        	}
        	50% {
        		transform: translate(0, 0) scaleY(.8);
        	}
        	100% {
        		background-color: #fff;
        		transform: translate(-35%, -20px) scaleY(1);
        	}
        }
        
        @keyframes hideSignup {
        	0% {
        		background-color: #fff;
        		transform: translate(-35%, -20px) scaleY(1);
        	}
        	50% {
        		transform: translate(0, 0) scaleY(.8);
        	}
        	100% {
        		background: #d7e7f1;
        		transform: translate(-40%, 10px) scaleY(.8);
        	}
        }
        
        .form fieldset {
        	position: relative;
        	opacity: 0;
        	margin: 0;
        	padding: 0;
        	border: 0;
        	transition: all .3s ease-out;
        }
        
        .form-login fieldset {
        	transform: translateX(-50%);
        }
        
        .form-signup fieldset {
        	transform: translateX(50%);
        }
        
        .form-wrapper.is-active fieldset {
        	opacity: 1;
        .........完整代码请登录后点击上方下载按钮下载查看