手写的一个简单后台登录页面Demo

其他 2021-10-08 12:06:07 阅读次数: 0

手写的一个简单后台登录页面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;
}

效果：

猜你喜欢

转载自blog.csdn.net/Cai181191/article/details/108127251
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022