css自适应登录注册一体切换表单过渡动画表单页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css自适应登录注册一体切换表单过渡动画表单页面效果代码，点击登录与注册按钮相互切换，并且有圆形过渡动画效果。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
        
        * {
	margin:0;
	padding:0;
	box-sizing:border-box
}
body,input {
	font-family:"Poppins",sans-serif
}
.container {
	position:relative;
	width:100%;
	background-color:#fff;
	min-height:100vh;
	overflow:hidden
}
.forms-container {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0
}
.signin-signup {
	position:absolute;
	top:50%;
	transform:translate(-50%,-50%);
	left:75%;
	width:50%;
	transition:1s .7s ease-in-out;
	display:grid;
	grid-template-columns:1fr;
	z-index:5
}
form {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	padding:0rem 5rem;
	transition:all .2s .7s;
	overflow:hidden;
	grid-column:1 / 2;
	grid-row:1 / 2
}
form.sign-up-form {
	opacity:0;
	z-index:1
}
form.sign-in-form {
	z-index:2
}
.title {
	font-size:2.2rem;
	color:#444;
	margin-bottom:10px
}
.input-field {
	max-width:380px;
	width:100%;
	background-color:#f0f0f0;
	margin:10px 0;
	height:55px;
	border-radius:55px;
	display:grid;
	grid-template-columns:15% 85%;
	padding:0 .4rem;
	position:relative
}
.input-field i {
	text-align:center;
	line-height:55px;
	color:#acacac;
	transition:.5s;
	font-size:1.1rem
}
.input-field input {
	background:0;
	outline:0;
	border:0;
	line-height:1;
	font-weight:600;
	font-size:1.1rem;
	color:#333
}
.input-field input::placeholder {
	color:#aaa;
	font-weight:500
}
.social-text {
	padding:.7rem 0;
	font-size:1rem
}
.social-media {
	display:flex;
	justify-content:center
}
.social-icon {
	height:46px;
	width:46px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 .45rem;
	color:#333;
	border-radius:50%;
	border:1px solid #333;
	text-decoration:none;
	font-size:1.1rem;
	transition:.3s
}
.social-icon:hover {
	color:#4481eb;
	border-color:#4481eb
}
.btn {
	width:150px;
	background-color:#5995fd;
	border:0;
	outline:0;
	height:49px;
	border-radius:49px;
	color:#fff;
	text-transform:uppercase;
	font-weight:600;
	margin:10px 0;
	cursor:pointer;
	transition:.5s
}
.btn:hover {
	background-color:#4d84e2
}
.panels-container {
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:grid;
	grid-template-columns:repeat(2,1fr)
}
.container:before {
	content:"";
	position:absolute;
	height:2000px;
	width:2000px;
	top:-10%;
	right:48%;
	transform:translateY(-50%);
	background-image:linear-gradient(-45deg,#4481eb 0,#04befe 100%);
	transition:1.8s ease-in-out;
	border-radius:50%;
	z-index:6
}
.image {
	width:100%;
	transition:transform 1.1s ease-in-out;
	transition-delay:.4s
}
.panel {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	justify-content:space-around;
	text-align:center;
	z-index:6
}
.left-panel {
	pointer-events:all;
	padding:3rem 17% 2rem 12%
}
.right-panel {
	pointer-events:none;
	padding:3rem 12% 2rem 17%
}
.panel .content {
	color:#fff;
	transition:transform .9s ease-in-out;
	transition-delay:.6s
}
.panel h3 {
	font-weight:600;
	line-height:1;
	font-size:1.5rem
}
.panel p {
	font-size:.95rem;
	padding:.7rem 0
}
.btn.transparent {
	margin:0;
	background:0;
	border:2px solid #fff;
	width:130px;
	height:41px;
	font-weight:600;
	font-size:.8rem
}
.right-panel .image,.right-panel .content {
	transform:translateX(800px)
}
.container.sign-up-mode:before {
	transform:translate(100%,-50%);
	right:52%
}
.container.sign-up-mode .left-panel .image,.container.sign-up-mode .left-panel .content {
	transform:translateX(-800px)
}
.container.sign-up-mode .signin-signup {
	left:25%
}
.container.sign-up-mode form.sign-up-form {
	opacity:1;
	z-index:2
}
.container.sign-up-mode form.sign-in-form {
	opacity:0;
	z-index:1
}
.container.sign-up-mode .right-panel .image,.container.sign-up-mode .right-panel .content {
	transform:translateX(0%)
}
.container.sign-up-mode .left-panel {
	pointer-events:none
}
.container.sign-up-mode .right-panel {
	pointer-events:all
}
@media(max-width:870px) {
	.container {
	min-height:800px;
	height:100vh
}
.signin-signup {
	width:100%;
	top:95%;
	transform:translate(-50%,-100%);
	transition:1s .8s ease-in-out
}
.signin-signup,.container.sign-up-mode .signin-signup {
	left:50%
}
.panels-container {
	grid-template-columns:1fr;
	grid-template-rows:1fr 2fr 1fr
}
.panel {
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	padding:2.5rem 8%;
	grid-column:1 / 2
}
.right-panel {
	grid-row:3 / 4
}
.left-panel {
	grid-row:1 / 2
}
.image {
	width:200px;
	transition:transform .9s ease-in-out;
	transition-delay:.6s
}
.panel .content {
	padding-right:15%;
	transition:transform .9s ease-in-out;
	transition-delay:.8s
}
.panel h3 {
	font-size:1.2rem
}
.panel p {
	font-size:.7rem;
	padding:.5rem 0
}
.btn.transparent {
	width:110px;
	height:35px;
	font-size:.7rem
}
.container:before {
	width:1500px;
	height:1500px;
	transform:translateX(-50%);
	left:30%;
	bottom:68%;
	right:initial;
	top:initial;
	transition:2s ease-in-out
}
.container.sign-up-mode:before {
	transform:translate(-50%,100%);
	bottom:32%;
	right:initial
}
.container.sign-up-mode .left-panel .image,.container.sign-up-mode .left-panel .content {
	transform:translateY(-300px)
}
.container.sign-up-mode .right-panel .image,.container.sign-up.........完整代码请登录后点击上方下载按钮下载查看