手写的一个简单后台登录页面Demo,方便以后拿来改改就用。
主要代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="桜智神座一诚·木">
<title>客户跟进管理系统丨登录入口</title>
<link rel="stylesheet" type="text/css" href="./css/materialdesignicons.min.css">
<link href="./css/login.css" rel="stylesheet"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="./js/materialize.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){
$(".submit").click(function () {
// $(".login-shade").css("display", "block");
$(".login-shade").fadeIn(100);
});
$(".login-center-box-p .input").click(function () {
$(".validation-summary-errors").css("display", "none");
});
});
</script>
</head>
<body>
<div class="login-center">
<div class="login-center-box">
<form action="javascript:void(0)" method="post">
<h1 class="login-center-box-">客户跟进管理系统</h1>
<p class="login-center-box-p">
<input class="input" placeholder="请输入用户账号" id="userName" maxlength="30" name="UserName" type="text" value="" autocomplete="off" />
<span class="mdi mdi-account"></span>
</p>
<p class="login-center-box-p">
<input class="input" placeholder="请输入用户密码" id="passWord" maxlength="30" name="PassWord" type="password" value="" />
<span class="mdi mdi-lock"></span>
</p>
<p class="login-center-box-p">
<input class="submit" type="submit" value="立即登录" />
</p>
<div class="line"></div>
<div class="validation-summary-errors">
<small>用户或密码错误!</small>
</div>
</form>
</div>
</div>
<div class="login-shade">
<div class="login-shade-box">
<div class="progress ro dot">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
login.css
* {
margin: 0;
padding: 0;
border: 0;
}
input:not([type="image" i]) {
box-sizing: unset;
}
body {
background-color: #E0ECFF;
}
.login-center {
width: 400px;
height: 290px;
position: absolute;
z-index: 1;
font-family: 'Microsoft YaHei';
margin: -145px 0 0 -200px;
left: 50%;
right: 0;
bottom: 0;
top: 50%;
background-color: #fff;
border-radius: 5px;
border: 1px solid #ccc;
}
.login-center-box {
width: 340px;
height: 220px;
margin: 30px;
}
.login-center-box h1 {
height: 60px;
line-height: 60px;
font-size: 18px;
font-weight: 400;
letter-spacing: 1.5px;
text-align: center;
color: #333;
}
.login-center-box-p {
width: 100%;
height: 37px;
position: relative;
}
.login-center-box-p span {
color: #ccc;
position: absolute;
display:block;
top: 10px;
left: 10px;
transition: all .5s ease;
-moz-transition: all .5s ease; /* Firefox 4 */
-webkit-transition: all .5s ease; /* Safari and Chrome */
-o-transition: all .5s ease; /* Opera */
}
.login-center-box-p .input {
width: 338px;
height: 35px;
border: 1px solid #ccc;
display:block;
position: relative;
font-weight: normal;
letter-spacing: 1px;
font-size: 13px;
color: #666;
margin-top: 10px;
transition: all .5s ease;
text-indent: 33px;
}
.login-center-box-p .input:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: none;
border-color: #66afe9;
}
.login-center-box-p .input:focus + span {
color: #000;
}
.login-center-box-p .submit {
width: 340px;
height: 35px;
color: #fff;
display: block;
font-size: 14px;
background-color: rgb(0,140,186);
letter-spacing: 1px;
transition: all .5s ease;
margin-top: 10px;
cursor: pointer;
}
.login-center-box-p .submit:focus {
outline: none;
border-color: #66afe9;
}
.login-center-box-p .submit:hover {
background-color: rgb(0,116,155);
}
.login-center-box .line {
border-top: 1px solid #ccc;
width: 100%;
height: 1px;
margin: 10px auto;
}
.login-shade {
display: none;
width: 400px;
height: 290px;
position: absolute;
z-index: 2;
margin: -145px 0 0 -200px;
left: 50%;
right: 0;
bottom: 0;
top: 50%;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
line-height: 280px;
font-family: 'Microsoft YaHei';
}
login-shade .login-shade-box {
width: 100%;
height: 100%;
position: relative;
}
.progress {
margin: 0 auto;
top: 100px;
left: 0px;
position: relative;
}
.progress.ro span {
position: absolute;
left: 20%;
top: 20%;
transform: rotate(225deg);
-ms-transform: rotate(225deg);/* IE 9 */
-moz-transform: rotate(225deg);/* Firefox */
-webkit-transform: rotate(225deg);/* Safari 和 Chrome */
-o-transform: rotate(225deg);/* Opera */
animation: orbit 4s infinite;
-moz-animation: orbit 4s infinite;
-webkit-animation: orbit 4s infinite;
-o-animation: orbit 4s infinite;
}
.progress.ro span:after {
content: '';
position: absolute;
border-radius: 100%;
background-color: #FFF;
animation: colorful 36.6s infinite linear;
}
.progress.ro span:nth-child(2) {
animation-delay: 260ms;
-moz-animation-delay: 260ms;
-webkit-animation-delay: 260ms;
-o-animation-delay: 260ms;
}
.progress.ro span:nth-child(3) {
animation-delay: 510ms;
-moz-animation-delay: 510ms;
-webkit-animation-delay: 510ms;
-o-animation-delay: 510ms;
}
.progress.ro span:nth-child(4) {
animation-delay: 750ms;
-moz-animation-delay: 750ms;
-webkit-animation-delay: 750ms;
-o-animation-delay: 750ms;
}
.progress.ro span:nth-child(5) {
animation-delay: 990ms;
-moz-animation-delay: 990ms;
-webkit-animation-delay: 990ms;
-o-animation-delay: 990ms;
}
.progress.ro.dot {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: rgba(0,0,0,.8);
}
.progress.ro.dot span {
width: 60%;
height: 60%;
}
.progress.ro.dot span:after {
width: 6px;
height: 6px;
}
@keyframes orbit {
0% {
transform: rotate(225deg);
opacity: 1;
filter:alpha(opacity=100);
animation-timing-function: ease-out;
}
7% {
transform: rotate(345deg);
animation-timing-function: linear;
}
30% {
transform: rotate(455deg);
animation-timing-function: ease-in-out;
}
39% {
transform: rotate(690deg);
animation-timing-function: linear;
}
70% {
transform: rotate(815deg);
opacity: 1;
filter:alpha(opacity=100);
animation-timing-function: ease-out;
}
75% {
transform: rotate(945deg);
animation-timing-function: ease-out;
}
76% {
transform: rotate(945deg);
opacity: 0;
filter:alpha(opacity=0);
}
100% {
transform: rotate(945deg);
opacity: 0;
filter:alpha(opacity=0);
}
}
@-moz-keyframes orbit {
0% {
-moz-transform: rotate(225deg);
-moz-opacity: 1;
-moz-animation-timing-function: ease-out;
}
7% {
-moz-transform: rotate(345deg);
-moz-animation-timing-function: linear;
}
30% {
-moz-transform: rotate(455deg);
-moz-animation-timing-function: ease-in-out;
}
39% {
-moz-transform: rotate(690deg);
-moz-animation-timing-function: linear;
}
70% {
-moz-transform: rotate(815deg);
-moz-opacity: 1;
-moz-animation-timing-function: ease-out;
}
75% {
-moz-transform: rotate(945deg);
-moz-animation-timing-function: ease-out;
}
76% {
-moz-transform: rotate(945deg);
-moz-opacity: 0;
}
100% {
-moz-transform: rotate(945deg);
-moz-opacity: 0;
}
}
@-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(225deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
7% {
-webkit-transform: rotate(345deg);
-webkit-animation-timing-function: linear;
}
30% {
-webkit-transform: rotate(455deg);
-webkit-animation-timing-function: ease-in-out;
}
39% {
-webkit-transform: rotate(690deg);
-webkit-animation-timing-function: linear;
}
70% {
-webkit-transform: rotate(815deg);
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
75% {
-webkit-transform: rotate(945deg);
-webkit-animation-timing-function: ease-out;
}
76% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
100% {
-webkit-transform: rotate(945deg);
opacity: 0;
}
}
@-o-keyframes orbit {
0% {
-o-transform: rotate(225deg);
opacity: 1;
-o-animation-timing-function: ease-out;
}
7% {
-o-transform: rotate(345deg);
-o-animation-timing-function: linear;
}
30% {
-o-transform: rotate(455deg);
-o-animation-timing-function: ease-in-out;
}
39% {
-o-transform: rotate(690deg);
-o-animation-timing-function: linear;
}
70% {
-o-transform: rotate(815deg);
opacity: 1;
-o-animation-timing-function: ease-out;
}
75% {
-o-transform: rotate(945deg);
-o-animation-timing-function: ease-out;
}
76% {
-o-transform: rotate(945deg);
opacity: 0;
}
100% {
-o-transform: rotate(945deg);
opacity: 0;
}
}
@keyframes colorful {
0% {
background-color: #1cb1f2;
}
6% {
background-color: #1cb1f2;
}
25% {
background-color: #0b5fff;
}
39% {
background-color: #7d3eff;
}
50% {
background-color: #df24e1;
}
55% {
background-color: #e13724;
}
60% {
background-color: #e1cc42;
}
63% {
background-color: #3ee104;
}
80% {
background-color: #27e1c9;
}
88% {
background-color: #1cb1f2;
}
100% {
background-color: #1cb1f2;
}
}
@-moz-keyframes colorful {
0% {
background-color: #1cb1f2;
}
6% {
background-color: #1cb1f2;
}
25% {
background-color: #0b5fff;
}
39% {
background-color: #7d3eff;
}
50% {
background-color: #df24e1;
}
55% {
background-color: #e13724;
}
60% {
background-color: #e1cc42;
}
63% {
background-color: #3ee104;
}
80% {
background-color: #27e1c9;
}
88% {
background-color: #1cb1f2;
}
100% {
background-color: #1cb1f2;
}
}
@-webkit-keyframes colorful {
0% {
background-color: #1cb1f2;
}
6% {
background-color: #1cb1f2;
}
25% {
background-color: #0b5fff;
}
39% {
background-color: #7d3eff;
}
50% {
background-color: #df24e1;
}
55% {
background-color: #e13724;
}
60% {
background-color: #e1cc42;
}
63% {
background-color: #3ee104;
}
80% {
background-color: #27e1c9;
}
88% {
background-color: #1cb1f2;
}
100% {
background-color: #1cb1f2;
}
}
@-o-keyframes colorful {
0% {
background-color: #1cb1f2;
}
6% {
background-color: #1cb1f2;
}
25% {
background-color: #0b5fff;
}
39% {
background-color: #7d3eff;
}
50% {
background-color: #df24e1;
}
55% {
background-color: #e13724;
}
60% {
background-color: #e1cc42;
}
63% {
background-color: #3ee104;
}
80% {
background-color: #27e1c9;
}
88% {
background-color: #1cb1f2;
}
100% {
background-color: #1cb1f2;
}
}
.validation-summary-errors {
text-align: center;
list-style: none;
text-align: center;
font-size: 13px;
color: red;
letter-spacing: 1px;
}
效果: