超炫酷的后台管理登录界面

a952543073
a952543073 发布于 2017-02-13 08:45:46 浏览:3398 类型:原创 - 随笔 分类:HTML/CSS - html/ccs 二维码: 作者原创 版权保护
由于都是应用的网上 css库  js库 所以第一次打开比较慢

不知道为啥 在这的黑色输入框的样式不好使  所以只能用白色 大家可以弄到本地 把对应的注释去掉即可(个人猜测应该是引用的网上的库的原因闹的)
[附图]超炫酷的后台管理登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <title></title>
	    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		
    	
	    <!-- 最新的 fontawesome 核心 css 文件 -->
	    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	    <link href="css/style.css" rel="stylesheet"/>
	    
	    <script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</head>
	<style>
	body {background: #000;min-height: 768px;}
	html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
body{min-width: 1200px;position: relative;}
body, button, input, select, textarea {
    font: .9em "微软雅黑";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow:-Scroll;
    overflow-x:hidden;
}
a {color: #000;position: relative;}
*{margin: 0;padding:0;}
ul, ol ,a{list-style: none;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;color: #000;}
a:active {text-decoration: none;}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:2px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
width: 3px;
background:rgba(0,0,0,0.3);
}
/*背景虚化*/
.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
	-ms-filter: blur(10px);    
	filter: blur(10px);    
}
	/*区域内虚化  值:像素*/
		.blur {
		    -webkit-filter: blur(2px); /* Chrome, Opera */
		    -moz-filter: blur(2px);
			-ms-filter: blur(2px);    
			filter: blur(2px);    
		}
		.bg-canvas {
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			min-height: 768px;
		}
		.bg-canvas iframe{
			border: 0px;
			width: 100%;
			height: 100%;
		}
		.cont {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 1;
		}
		.cont section {
			width: 1200px;
			height: 100%;
			margin: 0 auto;
		}
		.cont_left {
			position: relative;
			top: 46%;
			width: 650px;
			float: left;
			color: #fff;
		}
		.cont_left h1 {
			font-size: 48px;
			font-weight: 900;
			margin-bottom: 10px;
			letter-spacing: 4px
		}
		.cont_right {
			position: relative;
			top: 33%;
			right: 0px;
			float: right;
			width: 350px;
			height: 350px;
			background: rgba(255,255,255,.1);
			border: 1px solid rgba(255,255,255,.5);
                        /*黑色的样式不好使*/
			/*color: #fff;*/
			border-radius: 10px;
			padding:50px 15px;
		}
		.cont_right h2 {
			margin-bottom: 35px;
			color:#fff;
		}
		.form-group {margin-bottom: 50px;}
		.form-group p {
			position: relative;
		}
		.form-group p i {
			width: 34px;
			height: 34px;
			font-size: 20px;
			text-align: center;
			line-height: 34px;
			position: absolute;
			top: 0;
			left: 0;
                        color:#000;
                        /*黑色的样式不好使*/
			/*color: #fff;*/
		}
		.form-group p a {
			width: 34px;
			height: 34px;
			font-size: 20px;
			text-align: center;
			line-height: 34px;
			position: absolute;
			top: 0;
			right: 0;
                        color:#000;
                        /*黑色的样式不好使*/
			/*color: #fff;*/
		}
		.form-group input {
			padding-left: 34px;
                        /*黑色的样式不好使*/
			/*background:rgba(0,0,0,.1);
			color:#fff;
			border: 1px solid rgba(255,255,255,.2);*/
		}
		.form-group input[id="inputEmail3"] {
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		.form-group input[id="exampleInputPassword3"] {
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
		}
	</style>
	<body id="body">
		<nav class="bg-canvas blur"><iframe name="htm" src="http://www.jq22.com/js/a5.html"></iframe></nav>
		<section class="cont">
			<section>
			<nav class="cont_left">
				<p><h1>XX后台管理系统登陆</h1>
					<p style="text-align: right;font-size: 20px;">综合监控、统计报表、资产管理系统</p>
				</p>
			</nav>
			<nav class="cont_right">
				<h2>平台登陆</h2>
				<div class="form-group">
			      <p><i class="fa fa-user"></i><input type="text" class="form-control" id="inputEmail3" name="name" placeholder="请输入用户名"></p>
			      <p><i class="fa fa-key"></i>
			      	<input type="password" class="form-control" id="exampleInputPassword3" name="pwdPrompt" placeholder="请输入密码">
			      	<input type="text" class="form-control" id="exampleInputPassword3" name="pwd" placeholder="请输入密码" style="display: none;">
			      <a class="eye"><i class="fa fa-eye-slash"></i></a></p>
			    </div>
			    <button type="button" class="btn btn-primary btn-lg btn-block">登陆</button>
			  </div>
			</nav>
			</section>
		</section>
	</body>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script>
    	$(function (){
    		$("#body").height($(window).height());
    	})
    	$(".eye").mouseover(function () { 
            $("input[name=pwd]").val($("input[name=pwdPrompt]").val());
            $("input[name=pwdPrompt]").hide(); 
            $("input[name=pwd]").show().focus(); 
            $(".eye i").removeClass("fa-eye-slash"); 
            $(".eye i").addClass("fa-eye"); 


        }); 
        $(".eye").mouseout(function () { 
           $("input[name=pwdPrompt]").val($("input[name=pwd]").val());
            $("input[name=pwdPrompt]").show().focus(); 
            $("input[name=pwd]").hide(); 
            $(".eye i").removeClass("fa-eye"); 
            $(".eye i").addClass("fa-eye-slash"); 
        }) 
    </script>
</html>

z
给个赞 37 人点赞
收藏 79 人收藏
评论 已有 19 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
luo963827954
luo9638279542017-02-13 14:40:0210F
我们公司的好Low //@luo963827954:有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (1) 回复 (1)
a952543073
a9525430732017-02-13 11:35:283F
有交互 就有点太乱了 所以我就用层次给覆盖掉了 添了个虚化 //@hsd8791:Canvas背景的酷炫交互就这么被吃掉了。。。
举报 支持 (1) 回复 (1)
a952543073
a9525430732017-02-13 14:38:369F
啊 ????? //@luo963827954:有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (1) 回复 (0)
a952543073
a9525430732017-02-13 10:32:041F
哈哈哈哈 看着真不错 我再把  密码显示更新上
举报 支持 (1) 回复 (0)
最新评论
a952543073
a952543073昨天 15:2419F
啊...........??? //@wishuice:jq22?
举报 支持 (0) 回复 (0)
wishuice
wishuice昨天 13:3018F
jq22?
举报 支持 (0) 回复 (1)
a952543073
a9525430737 天前17F
主要还是  ifarme 里面 又套了一个 ifarme  动画界面大肯定占CPU //@qingyang117:http://www.jq22.com/js/a5.html这个很流畅也有交互,你用IFARME做为背景并且写了虚化效果后就感觉很卡了!
举报 支持 (0) 回复 (0)
qingyang117
qingyang1177 天前16F
http://www.jq22.com/js/a5.html这个很流畅也有交互,你用IFARME做为背景并且写了虚化效果后就感觉很卡了!
举报 支持 (0) 回复 (1)
903786831z
903786831z2017-02-14 17:41:3915F
看着头晕
举报 支持 (0) 回复 (0)
蚂蚱1105
蚂蚱11052017-02-14 17:18:3414F
效果确实很高大上   但是一打开效果预览   cpu占用率从10%飙升到60%了
举报 支持 (0) 回复 (0)
luomg1995
luomg19952017-02-14 10:04:0713F
按钮点击时有边框:-webkit-tap-highlight-color: transparent;
密码变明文是将密码框隐藏输入框显示?
举报 支持 (0) 回复 (0)
1444760873
14447608732017-02-13 16:54:3512F
就是 js动画加个ui form 没什么好说的 我还以为是angular的form验证加组件呢 白兴奋了 codepen 上多的是
举报 支持 (0) 回复 (0)
a952543073
a9525430732017-02-13 14:57:5811F
毕竟easyUI这一类的都用习惯了 新的模板得需要开发 直接就能用的比较少 //@luo963827954:我们公司的好Low //@luo963827954:有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (0) 回复 (0)
luo963827954
luo9638279542017-02-13 14:40:0210F
我们公司的好Low //@luo963827954:有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (1) 回复 (1)
a952543073
a9525430732017-02-13 14:38:369F
啊 ????? //@luo963827954:有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (1) 回复 (0)
luo963827954
luo9638279542017-02-13 14:35:418F
有 //@a952543073:暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (0) 回复 (2)
a952543073
a9525430732017-02-13 13:52:537F
暂时还没有 正在开发 //@tiansuiziswj:这套真好看,还有其他的后台管理界面么。。
举报 支持 (0) 回复 (1)
tiansuiziswj
tiansuiziswj2017-02-13 13:28:116F
这套真好看,还有其他的后台管理界面么。。
举报 支持 (0) 回复 (1)
a952543073
a9525430732017-02-13 12:01:485F
嘿嘿嘿嘿 //@hsd8791:可怜 //@a952543073:有交互 就有点太乱了 所以我就用层次给覆盖掉了 添了个虚化 //@hsd8791:Canvas背景的酷炫交互就这么被吃掉了。。。
举报 支持 (0) 回复 (0)
a952543073 a952543073 作者

爱前端 追求 卓越 平凡 创新

作者最新