js实现带泡泡上浮背景的登录表单页面效果代码-html代码-BFW代码库

js实现带泡泡上浮背景的登录表单页面效果代码

代码语言：html

代码描述：js实现带泡泡上浮背景的登录表单页面效果代码

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

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        * {
    	margin:0;
    	padding:0
    }
    body {
    	margin:0;
    	padding:0;
    	font:normal 14px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
    }
    div {
    	display:block
    }
    a {
    	text-decoration:none;
    	opacity:1;
    	color:#fff
    }
    button,input {
    	outline:0
    }
    ::-moz-focus-inner {
    	border:0
    }
    .login_header {
    	position:absolute;
    	top:0;
    	left:0;
    	right:0
    }
    #logo {
    	display:block;
    	text-align:center;
    	font-weight:700;
    	font-size:50px;
    	color:#fff;
    	height:100%;
    	text-shadow:2px 2px 3px rgba(0,0,0,0.5)
    }
    #subheading {
    	position:relative;
    	width:517px;
    	left:50%;
    	margin:10px 0 16px -258px;
    	font-size:15px;
    	font-weight:400;
    	color:#fff;
    	text-align:center
    }
    .signup_forms {
    	width:260px;
    	height:145px
    }
    .signup_forms_container {
    	width:260px;
    	overflow:hidden;
    	background:#fff;
    	border-radius:3px
    }
    .form_password,.form_user {
    	width:260px;
    	height:45px;
    	margin:0;
    	padding:0;
    	border:0
    }
    .form_password {
    	border-top:1px solid #e3e3e3
    }
    .signup_forms input {
    	padding:11px 10px 11px 13px;
    	width:100%;
    	margin:0;
    	background:0;
    	font:16px/1.4 "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
    	border:0
    }
    #signup_forms_submit {
    	margin-top:8px;
    	width:260px;
    	height:45px;
    	background:#529ECC;
    	border:0;
    	border-radius:3px;
    	cursor:pointer
    }
    #signup_forms_submit span {
    	color:#fff;
    	font:"Helvetica Neue",Arial,Helvetica,sans-serif;
    	font-size:16px
    }
    .footer {
    	position:fixed;
    	top:auto;
    	right:0;
    	bottom:0;
    	left:0
    }
    .footer_signup_link {
    	position:absolute;
    	width:141px;
    	height:78px;
    	bottom:0;
    	padding:0 20px;
    	margin:0 0 13px 0;
    	line-height:25px;
    	text-align:center;
    	opacity:1;
    	color:#fff
    }
    .signup_link {
    	display:block;
    	height:45px;
    	padding:0 10px;
    	margin:0 0 8px 0;
    	font-size:16px;
    	font-weight:700;
    	line-height:45px;
    	border:0;
    	border-radius:2px;
    	color:#fff;
    	background:rgba(255,255,255,.33)
    }
    .link {
    	font-size:14px;
    	padding-right:5px;
    	margin-right:12px;
    	color:#fff
    }
    .design_show {
    	position:fixed;
    	bottom:0;
    	right:0;
    	padding:0 12px;
    	margin:0 0 13px 0;
    	line-height:25px
    }
    .designer_info {
    	position:relative;
    	color:#FFF
    }
    #face {
    	margin:0 0 0 10px;
    	vertical-align:middle;
    	border-radius:20px;
    	padding:0;
    	height:24px;
    	width:24px
    }
    .large-header {
    	position:relative;
    	width:100%;
    	background:#333;
    	overflow:hidden;
    	background-size:cover;
    	background-position:center center;
    	z-index:1
    }
    .demo-2 .large-header {
    	background-image:url(//repo.bfw.wiki/bfwrepo/image/60dffe2631ade.png);
    	background-position:center bottom
    }
    . .main-title {
    	position:absolute;
    	margin:0;
    	padding:0;
    	color:#f9f1e9;
    	text-align:center;
    	top:50%;
    	left:50%;
    	-webkit-transform:translate3d(-50%,-50%,0);
    	transform:translate3d(-50%,-50%,0)
    }
    .demo-2 {
    	position:absolute;
    	height:100%;
    	width:100%;
    	top:0;
    	left:0;
    	z-index:0
    }
    .container {
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:1;
    	width:260px;
    	left:50%;
    	margin-left:-130px;
    	top:50%;
    	margin-top:-200px
    }
    .demo-2 .main-title {
    	font-family:'Clicker Script',cursive;
    	font-weight:400;
    	font-size:8em;
    	padding-left:10px;
    	text-shadow:2px 2px 4px rgba(0,0,0,.4)
    }
    .demo-2 .main-title::before {
    	content:'';
    	width:20vw;
    	height:20vw;
    	min-width:3.5em;
    	min-height:3.5em;
    
    	background-size:cover;
    	position:absolute;
    	top:50%;
    	left:50%;
    	b.........完整代码请登录后点击上方下载按钮下载查看