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

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

代码语言：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-conte.........完整代码请登录后点击上方下载按钮下载查看