序言：昨天发了一篇html5的后台登录页面，非常深受大家的喜爱，今天再分享一款非常好看大气的后台登录页面，也是自适应手机端，希望大家能够喜欢，赶紧收藏转发吧。
html5星空背景的登录页面带粒子特效，适用于后台管理系统登录
简介：基于Layui蓝色全屏粒子线条动画背景后台登录界面模板，带登录表单验证功能。
效果图：
代码：
html
<div c++lass="layui-container"> <div class="1065-6d6d-8d79-153f admin-login-background"> <div class="6d6d-8d79-153f-eab5 layui-form login-form"> <form class="8d79-153f-eab5-1b20 layui-form" action=""> <div class="153f-eab5-1b20-650c layui-form-item logo-title"> <h1>一间闲置后台管理系统</h1> </div> <div class="eab5-1b20-650c-a01f layui-form-item"> <label class="1b20-650c-a01f-6de7 layui-icon layui-icon-username" for="username"></label> <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="650c-a01f-6de7-9303 layui-input" value="admin"> </div> <div class="a01f-6de7-9303-b68b layui-form-item"> <label class="6de7-9303-b68b-3de0 layui-icon layui-icon-password" for="password"></label> <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="9303-b68b-3de0-3850 layui-input" value="123456"> </div> <div class="b68b-3de0-3850-44cd layui-form-item"> <label class="3de0-3850-44cd-0b17 layui-icon layui-icon-vercode" for="captcha"></label> <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="3850-44cd-0b17-3f8e layui-input verification captcha" value="xszg"> <div class="44cd-0b17-3f8e-51f5 captcha-img"> <img src="img/valicode.jpg" /> </div> </div> <div class="9dbe-1065-6d6d-8d79 layui-form-item"> <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码"> </div> <div class="1065-6d6d-8d79-153f layui-form-item"> <button class="6d6d-8d79-153f-eab5 layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button> </div> </form> </div> </div></div>js
<script> layui.use(['form'], function () { var form = layui.form, layer = layui.layer; // 登录过期的时候，跳出ifram框架 if (top.location != self.location) top.location = self.location; // 粒子线条背景 $(document).ready(function(){ $('.layui-container').particleground({ dotColor:'#7ec7fd', lineColor:'#7ec7fd' }); }); // 进行登录操作 form.on('submit(login)', function (data) { data = data.field; if (data.username == '') { layer.msg('用户名不能为空'); return false; } if (data.password == '') { layer.msg('密码不能为空'); return false; } if (data.captcha == '') { layer.msg('验证码不能为空'); return false; } layer.msg('登录成功', function () { }); return false; }); });</script>css
<style> html, body {width: 100%;height: 100%;overflow: hidden} body {background: #1E9FFF;} body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;} .layui-container {width: 100%;height: 100%;overflow: hidden} .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;} .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;} .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;} .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;} .login-form .layui-form-item {position:relative;} .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;} .login-form .layui-form-item input {padding-left:36px;} .captcha {width:60%;display:inline-block;} .captcha-img {display:inline-block;width:34%;float:right;} .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;} </style>有需要源码的同学在评论区留言或者私信我吧。
我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。
往期文章分享：
程序员搞笑的段子，总有一条戳中你的笑点
微信小程序授权登录适配wx.getUserprofile最新代码
