bootstrap简洁居中毛玻璃登录源码
分享一个bootstrap简洁居中毛玻璃登录源码，感觉很好看，希望大家喜欢。随机图调用杨小杰api接口
做了两个，一个是原版的，一个是emlog登录的，还有一个typecho版本的
原版源码：
<html>
<head>
<meta itemprop="name" content="杨小杰博客后台"/>
<meta itemprop="image" content="http://www.youngxj.cn/logopic.png" />
<meta name="description" itemprop="description" content="账号：admin \r\n 密码：password" />
<meta name="viewport" content="width=device-width">
<meta name="author" content="Youngxj" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户登录</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{background:url('//api.yum6.cn/soimg/soimg.php');background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
margin-right:-4px;
}
.row-centered{
z-index: 0;/* 为不影响内容显示必须为最高层 */
position: relative;
overflow: hidden;
}
.row-centered:after {
content: "";/* 必须包括 */
position: absolute;/* 固定模糊层位置 */
left: -100%;/* 回调模糊层位置 */
top: -100%;/* 回调模糊层位置 */
background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
filter: blur(20px);/* 值越大越模糊 */
z-index: -2;/* 模糊层在最下面 */
}
.well{
background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示，将背景颜色加深 */
}
.well {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
background: hsla(0,0%,100%,.3);
overflow: hidden;
text-align:left;
/* -webkit-filter: blur(3px);
filter: blur(3px);*/
}
.well::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
margin: -30px;
/*background: rgba(255,0,0,.5);*/
}
.form-control{background-color:rgba(255, 255, 255, 0);}
#sizing-addon1{background:rgba(255, 0, 0, 0);}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>欢迎登录</h2>
<form action="login.php" method="post" role="form">
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="user" name="user" placeholder="请输入用户ID"/>
</div>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
</div>
<br/>
<div class="login-button">
<div class="checkboxs"> <input type="checkbox" name="ispersis" id="ispersis" value="1" /><span><label for="ispersis">记住我</label></span></div>
</div>
<button type="submit" class="btn btn-success btn-block">登录</button>
</form>
</div>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>emlog后台登录版：
<?php if(!defined('EMLOG_ROOT')) {exit('error!');}?>
<html>
<head>
<meta itemprop="name" content="杨小杰博客后台"/>
<meta itemprop="image" content="http://www.youngxj.cn/logopic.png" />
<meta name="description" itemprop="description" content="账号：admin \r\n 密码：password" />
<meta name="viewport" content="width=device-width">
<meta name="author" content="Youngxj" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户登录</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="./views/login/js/verificationNumbers.js" tppabs="./views/login/js/verificationNumbers.js"></script>
<script src="./views/login/js/Particleground.js" tppabs="./views/login/js/Particleground.js"></script>
<style>
body{background:url('//api.yum6.cn/soimg/soimg.php');background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
margin-right:-4px;
}
.row-centered{
z-index: 0;/* 为不影响内容显示必须为最高层 */
position: relative;
overflow: hidden;
}
.row-centered:after {
content: "";/* 必须包括 */
position: absolute;/* 固定模糊层位置 */
left: -100%;/* 回调模糊层位置 */
top: -100%;/* 回调模糊层位置 */
background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
filter: blur(20px);/* 值越大越模糊 */
z-index: -2;/* 模糊层在最下面 */
}
.well{
background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示，将背景颜色加深 */
}
.well {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
background: hsla(0,0%,100%,.3);
overflow: hidden;
text-align:left;
/* -webkit-filter: blur(3px);
filter: blur(3px);*/
}
.well::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
margin: -30px;
/*background: rgba(255,0,0,.5);*/
}
.form-control{background-color:rgba(255, 255, 255, 0);}
#sizing-addon1{background:rgba(255, 0, 0, 0);}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>欢迎登录</h2>
<form action="./index.php?action=login" method="post" role="form" name="f">
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="user" name="user" placeholder="请输入用户ID"/>
</div>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="pw" name="pw" placeholder="请输入密码"/>
</div>
<br/>
<div class="createCode">
<?php echo $ckcode; ?>
</div>
<div class="login-button">
<div class="checkboxs"> <input type="checkbox" name="ispersis" id="ispersis" value="1" /><span><label for="ispersis">记住我</label></span></div>
</div>
<div class="login-ext"><?php doAction('login_ext'); ?></div>
<button type="submit" class="btn btn-success btn-block">登录</button>
<?php if ($error_msg): ?>
<div class="login-error"><?php echo $error_msg; ?></div>
<?php endif;?>
</form>
</div>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
<script>
$(document).ready(function() {
createCode();
});
</script>
</html>找到路径/admin/views/login.php替换里面的内容即可，如果你是用的其他后台主题只需要找到该目录下的login.php即可
typecho版本：
<?php
include 'common.php';
if ($user->hasLogin()) {
$response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');
$bodyClass = 'body-100';
include 'header.php';
?>
<html>
<head>
<meta itemprop="name" content="登录后台"/>
<meta itemprop="image" content="http://www.youngxj.cn/logopic.png" />
<meta name="description" itemprop="description" content="账号：admin \r\n 密码：password" />
<meta name="viewport" content="width=device-width">
<meta name="author" content="Youngxj" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用typecho登录</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body{background:url('//api.yum6.cn/soimg/soimg.php');background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
/*web background*/
.container{
display:table;
height:100%;
}
.row{
display: table-cell;
vertical-align: middle;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
margin-right:-4px;
}
.row-centered{
z-index: 0;/* 为不影响内容显示必须为最高层 */
position: relative;
overflow: hidden;
}
.row-centered:after {
content: "";/* 必须包括 */
position: absolute;/* 固定模糊层位置 */
left: -100%;/* 回调模糊层位置 */
top: -100%;/* 回调模糊层位置 */
background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
filter: blur(20px);/* 值越大越模糊 */
z-index: -2;/* 模糊层在最下面 */
}
.well{
background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示，将背景颜色加深 */
}
.well {
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 30em;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
background: hsla(0,0%,100%,.3);
overflow: hidden;
text-align:left;
/* -webkit-filter: blur(3px);
filter: blur(3px);*/
}
.well::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
margin: -30px;
/*background: rgba(255,0,0,.5);*/
}
.form-control{background-color:rgba(255, 255, 255, 0);}
#sizing-addon1{background:rgba(255, 0, 0, 0);}
</style>
</head>
<body>
<div class="container">
<div class="row row-centered">
<div class="well col-md-6 col-centered">
<h2>登录到typecho</h2>
<form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
<p>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<label for="name" class="sr-only"><?php _e('用户名'); ?></label>
<input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
</div>
</p>
<p>
<div class="input-group input-group-md">
<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
<label for="password" class="sr-only"><?php _e('密码'); ?></label>
<input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
</div>
</p>
<p class="submit">
<button type="submit" class="btn btn-success btn-block">登录</button>
<input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
</p>
<p>
<label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label>
</p>
</form>
</div>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>感谢凡梦大佬移植并提供代码，因为我没有typecho就没有测试效果了，你们自行测试吧
效果图
源码截图.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-4-15 1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录