TweenMax实现带动画过渡效果的注册表单代码-html代码-BFW代码库

TweenMax实现带动画过渡效果的注册表单代码

代码语言：html

代码描述：TweenMax实现带动画过渡效果的注册表单代码

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

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

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
	width:100%;
	position:relative;
	background:#d7427d;
	font-family:helvetica
}
.input-group {
	padding:10px 40px;
	height:25px;
	transform:translateY(-10px) scale(0.7);
	transition:all ease .3s;
	opacity:0
}
.input-group.first {
	margin-top:-20px
}
.input-group.open {
	transform:translateY(0px) scale(1);
	opacity:1
}
.input-group label {
	display:block;
	font-family:"Helvetica";
	letter-spacing:1px;
	color:#b3b3b3;
	font-size:12px;
	transform:translateY(-22px);
	transition:all ease .3s
}
.input-group input {
	display:block;
	width:100%;
	border:0;
	border-bottom:1px solid #eee;
	outline:0;
	line-height:20px;
	font-family:"Helvetica";
	letter-spacing:1px
}
.input-group input:focus ~ label {
	font-size:8px;
	transform:translateY(-36px)
}
.input-group input.not-empty ~ label {
	font-size:8px;
	transform:translateY(-36px)
}
.mobile {
	background:#3f51b4;
	width:335px;
	height:587px;
	border-radius:2px;
	position:absolute;
	left:0;
	right:0;
	margin:110px auto;
	box-shadow:3px 4px 15px 2px rgba(0,0,0,0.6)
}
.mobile.changepage .btn-signup.done {
	box-shadow:0 1px 13px 3px rgba(0,0,0,0.25);
	width:50px!important;
	transform:rotate(0deg) translate(0px) rotate(0deg)
}
.mobile.changepage .btn-signup.done p {
	opacity:0
}
.mobile.changepage .login-wrapper.open {
	transform:translateY(-210px);
	margin:0 auto 0 auto;
	z-index:2;
	width:100%;
	border-radius:0;.........完整代码请登录后点击上方下载按钮下载查看