css实现蓝色自适应登录表单页面效果代码
代码语言: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;
-.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0