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

代码语言：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;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	height:480px
}
.mobile.changepage .login-wrapper.open .content-list {
	height:100%;
	visibility:visible
}
.mobile.changepage .login-wrapper.open .content-list li.down {
	transform:translateY(0px);
	opacity:1
}
.mobile.changepage .login-wrapper.open .form-control,.mobile.changepage .login-wrapper.open label {
	visibility:hidden
}
.mobile .logo {
	width:100px;
	height:50px;
	color:#fff;
	font-size:70px;
	text-align:center;
	position:relative;
	margin:100px auto 60px auto
}
.mobile .logo .plane {
	transform:rotate(20deg)
}
.mobile .line {
	width:130px;
	height:5px;
	background:#fff;
	position:relative;
	margin:0 auto;
	border-radius:30px;
	opacity:.8
}
.mobile .line.blur {
	opacity:.7;
	width:80px;
	height:4px;
	top:20px
}
.mobile .login-wrapper {
	position:relative;
	top:70px;
	left:0;
	right:0;
	z-index:0;
	width:150px;
	height:50px;
	background:#fff;
	margin:130px auto 0 auto;
	border-radius:50px;
	box-shadow:0 6px 13px 1px rgba(40,51,115,0.45);
	transition:all ease .3s
}
.mobile .login-wrapper.open {
	padding-top:50px;
	top:80px;
	margin:0 auto 0 auto;
	z-index:2;
	width:290px;
	border-radius:6px;
	height:180px
}
.mobile .btn-signup.done {
	opacity:0;
	transition:all ease .3s;
	background:#eb2168;
	position:absolute;
	bottom:60px;
	z-index:2;
	color:#fff;
	margin:0 auto;
	left:0;
	right:0;
	width:0;
	top:auto;
	box-shadow:none
}
.mobile .btn-signup.done.open {
	opacity:1;
	width:150px
}
.mobile .btn-signup {
	cursor:pointer;
	position:absolute;
	margin:0 auto;
	width:150px;
	height:50px;
	left:0;
	right:0;
	margin:0 auto;
	bottom:0;
	font-family:helvetica;
	display:block;
	background:#fff;
	border:0;
	outline:0;
	border-radius:50px;
	color:#3f51b4;
	font-weight:700;
	font-size:14px;
	letter-spacing:1px;
	top:420px;
	box-shadow:0 3px 13px 3px rgba(40,51,115,0.45)
}
.mobile .btn-signup.done {
	position:absolute
}
.mobile .btn-signup.done .fa {
	position:absolute;
	top:20px;
	transition:all cubic-bezier(0.75,-0.5,0,1.75) .3s;
	transform:translateY(8px);
	opacity:0;
	left:0;
	right:0;
	margin:0 auto
}
.mobile .btn-signup.done.move {
	transform:rotate(-90deg) translate(-40px,130px) rotate(0);
	border-radius:100%;
	width:50px
}
.mobile .btn-signup.done.move .fa.show {
	opacity:1;
	transform:translateY(-2px)
}
.content-list {
	list-style-type:none;
	width:100%;
	visibility:hidden;
	height:0;
	overflow:hidden;
	top:-40px;
	padding:0;
	position:relative
}
.content-list li {
	transform:translateY(-10px);
	transition:all ease .3s;
	opacity:0;
	display:block;
	width:auto;
	padding:10px 30px;
	height:70px
}
.content-list li .avatar {
	width:60px!important;
	display:block;
	height:60px;
	float:left;
	background:#ff4c81;
	border-radius:100%
}
.content-list li .avatar.yellow {
	background:#f9ed46
}
.content-list li .avatar.blue {
	background:#48bdf9
}
.content-list li .text {
	float:right;
	text-align:left;
	width:70%
}
.content-list li .text .line:nth-child(1) {
	background:#eee;
	width:190px;
	margin:0;
	margin-top:20px;
	height:7px
}
.content-list li .text .line:nth-child(2) {
	background:#eee;
	top:10px;
	margin:0;
	height:7px
}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class='mobile'>
        <div class='logo'><span class='fa fa-paper-plane-o plane'></span>&l.........完整代码请登录后点击上方下载按钮下载查看