jquery+css带loading加载动画的登录注册表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css带loading加载动画的登录注册表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
font-family: 'Open Sans Condensed', sans-serif;
color: #464646;
transition: all 1.5s linear;
overflow: hidden !important;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.container .bg-img {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
opacity: 0;
filter: blur(5px);
transform: scale(1.5);
}
.container .bg-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
.header {
position: absolute;
width: 100%;
height: 100%;
background-color: #464646;
display: table;
text-align: center;
color: #e2e8e7;
z-index: 10;
}
.header h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 72px;
z-index: 2;
position: relative;
color: #E2E8E7;
}
.main {
position: absolute;
width: 100%;
height: 100%;
}
.main .login {
position: absolute;
background: #fff;
height: 260px;
width: 300px;
bottom: -520px;
left: 50%;
margin-left: -150px;
box-shadow: 0 0 20px 2px #464646;
z-index: 2;
}
.main .register {
position: absolute;
background: #fff;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0