bootstrap+jquery实现自适应三维立体登录注册表单效果代码-html代码-BFW代码库

bootstrap+jquery实现自适应三维立体登录注册表单效果代码

代码语言：html

代码描述：bootstrap+jquery实现自适应三维立体登录注册表单效果代码

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

<!DOCTYPE html>
<html lang="en" class="html-style">

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700'>
    <style>
        .html-style body {
    	background-image:url("//repo.bfw.wiki/bfwrepo/image/649d2a94b2a0d.png");
    	background-position:center top;
    	background-size:cover;
    	background-repeat:no-repeat;
    	
    	min-height:100vh;
    	
    	background-color: lightgreen;
    	background-blend-mode: multiply;
    
    	font-family:"Fira Sans";
    	font-weight:400;
    }
    
    .border-0 {
    	border:none;
    }
    
    .modal-style {
    	background-image: url("//repo.bfw.wiki/bfwrepo/image/649d2a94b2a0d.png");
    	background-position: center top;
    	background-size: cover;
    	
    	background-color: lightgreen;
      background-blend-mode: multiply;
    	
    	border-radius:6px;
    }
    
    .margin-0 {
    	margin:0;
    }
    
    .modal-perspective {
    	perspective:1000px;
    }
    
    .form-style {
    	margin-left:40px;
    	margin-right:-60px;
    
    	background:white;
    	padding:20px;
    	border-radius:6px;
    	padding-right:45px;
    }
    
    .form-style input {
    	font-weight:300;
    	font-size:11px !important;
    }
    
    .form-style .form-group label {
    	font-weight:700;
    }
    
    .pt-0 {
    	padding-top:0;
    }
    
    .pb-0 {
    	padding-bottom:0;
    }
    
    .modal-style h6 {
    	margin-top:5px;
    }
    
    .text-white {
    	color:white;
    	opacity:1;
    }
    
    .mt-25vh {
    	margin-top:25vh;
    }
    
    .font-11px {
    	font-size:11px;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container mt-25vh">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <div class="jumbotron">
                    <p class="lead">Bootstrap assist based on <a href="">Luka Dadiani's rebound</a> of <a href="" target="_blank">Matt Rossi's dribbble</a>.</p>
                    <hr>
                    <a data-toggle="modal" data-target="#sign-modal" class="btn btn-block btn-success">Sign Up</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="sign-modal">
        <div class="modal-dialog modal-perspective modal-sm">
            <div class="modal-content modal-style">
                <div class="modal-header text-white border-0">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="text-white" aria-hidden="true">&times;</span></button>
                    <h6 class="text-white">Create Your Account</h6>
                </div>
                <div class=".........完整代码请登录后点击上方下载按钮下载查看