bootstrap创意蓝色登录表单效果代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap创意蓝色登录表单效果代码

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

<!DOCTYPE html>
<html lang="en">

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

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        body {

        	margin:0;
        	padding:0;
        	overflow-x:hidden
        }
        .main-bg::after {
        	background-color:#fef5e4;
        	-webkit-border-radius:0 0 233px 135px;
        	-moz-border-radius:0 0 233px 135px;
        	border-radius:0 0 233px 135px;
        	content:"";
        	position:absolute;
        	right:-119px;
        	top:-93px;
        	background-color:#fef5e4;
        	width:466px;
        	height:595px;
        	-webkit-transform:rotate(45deg);
        	transform:rotate(116deg);
        	z-index:-2
        }
        .box-conatiner {
        	contain:content;
        	margin:50px auto;
        	height:500px;
        	width:80%;
        	background-color:#5d4ef3;
        	border-radius:0 70px;
        	box-shadow:0 .46875rem 2.1875rem rgba(4,9,20,0.03),0 .9375rem 1.40625rem rgba(4,9,20,0.03),0 .25rem .53125rem rgba(4,9,20,0.05),0 .125rem .1875rem rgba(4,9,20,0.03)
        }
        .box-conatiner::before {
        	content:"";
        
        	position:absolute;
        	right:-20px;
        	background-size:100%;
        	top:-80px;
        	width:1220px;
        	height:653px
        }
        #a {
        	-webkit-animation:wait 0s alternate infinite;
        	animation:wait 0s alternate infinite
        }
        .circle-ripple {
        	background-color:transparent;
        	width:1px;
        	height:1px;
        	border-radius:50%;
        	-webkit-animation:ripple .7s linear infinite;
        	animation:ripple .7s linear infinite;
        	left:60px;
        	position:absolute;
        	top:44px
        }
        @-webkit-keyframes wait {
        	0% {
        	opacity:0
        }
        20% {
        	opacity:0
        }
        40% {
        	opacity:0
        }
        60% {
        	opacity:0
        }
        100% {
        	opacity:1
        }
        }@keyframes wait {
        	0% {
        	opacity:0
        }
        20% {
        	opacity:0
        }
        40% {
        	opacity:0
        }
        60% {
        	opacity:0
        }
        100% {
        	opacity:1
        }
        }@-webkit-keyframes ripple {
        	0% {
        	box-shadow:0 0 0 0 rgba(175,166,255,0.3),0 0 0 1em rgba(175,166,255,0.3),0 0 0 3em rgba(175,166,255,0.3),0 0 0 5em rgba(175,166,255,0.3)
        }
        100% {
        	box-shadow:0 0 0 1em rgba(175,166,255,0.3),0 0 0 3em rgba(175,166,255,0.3),0 0 0 5em rgba(175,166,255,0.3),0 0 0 8em rgba(175,166,255,0)
        }
        }@keyframes ripple {
        	0% {
        	box-shadow:0 0 0 0 rgba(175,166,255,0.3),0 0 0 1em rgba(175,166,255,0.3),0 0 0 3em rgba(175,166,255,0.3),0 0 0 5em rgba(175,166,255,0.3)
        }
        100% {
        	box-shadow:0 0 0 1em rgba(175,166,255,0.3),0 0 0 3em rgba(175,166,255,0.3),0 0 0 5em rgba(175,166,255,0.3),0 0 0 8em rgba(175,166,255,0)
        }
        }body,html {
        	height:100%;
        	font-family:Ubuntu-Regular,sans-serif
        }
        a {
        	font-family:Ubuntu-Regular;
        	font-size:14px;
        	line-height:1.7;
        	color:#666;
        	margin:0;
        	transition:all .4s;
        	-webkit-transition:all .4s;
        	-o-transition:all .4s;
        	-moz-transition:all .4s
        }
        a:focus {
        	outline:none!important
        }
        a:hover {
        	text-decoration:none;
        	color:#1b3815
        }
        h1,h2,h3,h4,h5,h6 {
        	margin:0
        }
        p {
        	font-family:Ubuntu-Regular;
        	font-size:14px;
        	line-height:1.7;
        	color:#666;
        	margin:0
        }
        ul,li {
        	margin:0;
        	list-style-type:none
        }
        input {
        	outline:0;
        	border:0
        }
        input[type=number] {
        	-moz-appearance:textfield;
        	appearance:none;
        	-webkit-appearance:none
        }
        input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button {
        	-webkit-appearance:none
        }
        textarea {
        	outline:0;
        	border:0
        }
        textarea:focus,input:focus {
        	border-color:transparent!important
        }
        input::-webkit-input-placeholder {
        	color:#1b3815
        }
        input:-moz-placeholder {
        	color:#1b3815
        }
        input::-moz-placeholder {
        	color:#1b3815
        }
        input:-ms-input-placeholder {
        	color:#1b3815
        }
        textarea::-webkit-input-placeholder {
        	color:#1b3815
        }
        textarea:-moz-placeholder {
        	color:#1b3815
        }
        textarea::-moz-placeholder {
        	color:#1b3815
        }
        textarea:-ms-input-placeholder {
        	color:#1b3815
        }
        button {
        	outline:none!important;
        	border:0;
        	background:0
        }
        button:hover {
        	cursor:pointer
        }
        iframe {
        	border:none!important
        }
        .txt1 {
        	font-family:Ubuntu-Regular;
        	font-size:15px;
        	color:#999;
        	line-height:1.4
        }
        .txt2 {
        	font-family:Ubuntu-Regular;
        	font-size:15px;
        	color:#57b846;
        	line-height:1.4
        }
        .txt3 {
        	font-family:Ubuntu-Bold;
        	font-size:15px;
        	color:#57b846;
        	line-height:1.4;
        	text-transform:uppercase
        }
        .limiter {
        	width:100%;
        	margin:0 auto
        }
        .container-login100 {
        	width:100%;
        	min-height:100vh;
        	display:-webkit-box;
        	display:-webkit-flex;
        	display:-moz-box;
        	display:-ms-flexbox;
        	display:flex;
        	flex-wrap:wrap;
        	justify-content:center;
        	align-items:center;
        	padding:15px;
        	position:relative;
        	background-color:#fff
        }
        .wrap-login100 {
        	width:450px;
        	background:#fff;
        	border-radius:20px;
        	overflow:hidden;
        	box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
        	-moz-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
        	-webkit-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
        	-o-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
        	-ms-box-shadow:0 3px 20px 0 rgba(0,0,0,.1);
        	height:451px;
        	border:1px solid #dedede;
        	margin:30px auto
        }
        .login100-form {
        	width:100%;
        	position:relative
        }
        .login100-form-title {
        	font-family:JosefinSans-Bold;
        	font-.........完整代码请登录后点击上方下载按钮下载查看