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