css实现蓝色自适应登录表单页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现蓝色自适应登录表单页面效果代码

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

<html>

<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        @CHARSET "UTF-8";
	* {
	font-family:"微软雅黑","Verdana","宋体","Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif
}
@keyframes fade-in {
	0% {
	opacity:0
}
40% {
	opacity:0
}
100% {
	opacity:1
}
}@-webkit-keyframes fade-in {
	0% {
	opacity:0
}
40% {
	opacity:0
}
100% {
	opacity:1
}
}.fade-in {
	animation:fade-in;
	animation-duration:1.5s;
	-webkit-animation:fade-in 1.5s
}
.fade-in {
	animation:fade-in;
	animation-duration:1.5s;
	-webkit-animation:fade-in 1.5s
}
@keyframes fade-out {
	0% {
	opacity:1
}
40% {
	opacity:.4
}
100% {
	opacity:0
}
}@-webkit-keyframes fade-out {
	0% {
	opacity:1
}
40% {
	opacity:.4
}
100% {
	opacity:0
}
}.fade-out {
	animation:fade-out;
	animation-duration:1.5s;
	-webkit-animation:fade-in 1.5s
}
.fade-out {
	animation:fade-out;
	animation-duration:1.5s;
	-webkit-animation:fade-in 1.5s
}
.modal-header {
	border-bottom:2px solid #f7f7f7;
	margin-bottom:10px;
	padding:0;
	padding-bottom:10px
}
.modal-header h3 {
	color:#545454;
	font-size:20px;
	font-style:normal;
	font-weight:normal;
	clear:left;
	margin:0 0 5px
}
.dialog {
	padding:0 30px 30px 30px
}
.form-control {
	-webkit-box-shadow:none;
	box-shadow:none;
	-webkit-transition:none
}
.form-control:focus {
	-webkit-box-shadow:none;
	box-shadow:none
}
.input-group-addon {
	color:#7b7b7b
}
a {
	color:#00aed8;
	text-decoration:none
}
a:hover {
	color:#00a2c9
}
a:focus,a:visited {
	text-decoration:none
}
.has-error .input-group-addon {
	color:#f0483e;
	border-color:#f0483e
}
.has-error .form-control {
	border-color:#f0483e;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow:0 1px 1px rgba(0,0,0,0.075)
}
.has-error .form-control:focus {
	border-color:#f0483e;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #f0483e;
	box-shadow:0 0 9px -2px #f0483e!important
}
.btn:active,.btn.active {
	-webkit-box-shadow:none;
	box-shadow:none
}
.btn>i {
	margin-right:3px
}
.btn.small {
	padding:2px 5px;
	font-size:90%
}
.btn.normal {
	background:#f7f7f7;
	border-color:#f7f7f7;
	color:#999
}
.btn.normal:hover {
	color:#545454;
	border-color:#e9e9e9;
	background:#e9e9e9
}
.pop-box .btn.small {
	padding:3px 17px;
	font-size:100%
}
.btn.gray,.btn.gray:ACTIVE {
	background-color:#7f7f7f;
	color:#fff;
	border:1px solid #7f7f7f
}
.btn.gray:HOVER {
	background-color:#666;
	border:1px solid #666
}
.btn.blue,.btn.blue:ACTIVE {
	background-color:#649efd;
	color:#fff;
	border:1px solid #649efd
}
.btn.blue:HOVER {
	background-color:#4c8ffc;
	border:1px solid #4c8ffc
}
.btn.red,.btn.red:ACTIVE {
	background-color:#fd6860;
	color:#fff;
	border:1px solid #fd6860
}
.btn.red:HOVER {
	background-color:#fc5047;
	border:1px solid #fc5047
}
.btn.green,.btn.green:ACTIVE {
	background-color:#00b16a;
	color:#fff;
	border:1px solid #00b16a
}
.btn.green:HOVER {
	background-color:#02965b;
	border:1px solid #02965b
}
.btn.green2,.btn.green2:ACTIVE {
	background-color:#00aed6;
	color:#fff;
	border:1px solid #00aed6
}
.btn.green2:HOVER {
	background-color:#02a3c7;
	border:1px solid #02a3c7
}
.btn.black,.btn.black:ACTIVE {
	background-color:#444;
	color:#fff;
	border:1px solid #444
}
.btn.black:HOVER {
	background-color:#333;
	border.........完整代码请登录后点击上方下载按钮下载查看