杨小杰Blog(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

bootstrap简洁居中毛玻璃登录源码

Young小杰2018-4-15 10:36 网站搭建(11)4392查询中……小标签: emlog 源码分享 原创

分享一个bootstrap简洁居中毛玻璃登录源码,感觉很好看,希望大家喜欢。随机图调用杨小杰api接口

做了两个,一个是原版的,一个是emlog登录的,还有一个typecho版本的

原版源码:


<html>
<head>
  <meta itemprop="name" content="杨小杰博客后台"/>
  <meta itemprop="image" content="http://blog.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/360img');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://blog.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/360img');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://blog.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/360img');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 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

发表评论:

评论列表:

  • 诗梦 Lv 1

    承君此诺,必守一生,回复了[嘚瑟]

  • 羊习习 Lv 1

    typecho  登录界面无图

    • Young小杰 站长

      回复了羊习习:老的api已经失效,现已更新,重新拷贝代码即可

  • Azura Lv 1

    效果不错拉过来用用

  • 欣宝 Lv 1

    不错不错,

  • 分享是提示自我的写作技术的提升,感谢博主热情分享,学习了。

  • 我个人的用处不那么大吧,

  • That year 1997 Lv 1

    谢谢博主分享

  • 支持!!

  • 墨渊 Lv 1

    刷刷外链

  • 剑客 Lv 2

    来支持下  OωO

  • 手机扫描二维码
    阅读体验更佳