序言：不要再为找不到好看的后台页面发愁了，一款非常大气的后台登录页面，自适应手机端，赶紧收藏转发吧。
简介：一款带粒子特效和星空背景的html5登录页面，鼠标在页面移动时，会有粒子的跟随效果，整体搭配还是比较大气的，喜欢的童鞋请收下吧。
效果图：
代码：
html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5星空背景的登录页面带粒子特效</title>
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<!--必要样式-->
<link type="text/css" rel="stylesheet" href="css/component.css" />
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<div class="logo_box">
<h3>欢迎登录</h3>
<form action="#" name="f" method="post">
<div class="input_outer">
<span class="u_user"></span>
<input name="logname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户">
</div>
<div class="input_outer">
<span class="us_uer"></span>
<input name="logpass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码">
</div>
<div class="mb2"><a class="act-but submit" href="javascript:;" style="color: #FFFFFF">登录</a></div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/TweenLite.min.js"></script>
<script type="text/javascript" src="js/EasePack.min.js"></script>
<script type="text/javascript" src="js/rAF.js"></script>
<script type="text/javascript" src="js/demo-1.js"></script>
</body>
</html>
js
<script>
$(function(){
var $captcha = $('#verify_img'),src = $captcha[0].src;
function captcha(){
$captcha.click(function(){
this.src = src+'?'+Date.parse(new Date());
});
}
captcha();
$('#form').on('submit',function(){
var account = $('#account').val(),pwd = $('#pwd').val(),verify = $('#verify').val();
if(!account) return layer.msg('请输入用户名');
if(!pwd) return layer.msg('请输入密码');
if(!verify) return layer.msg('请输入验证码');
$.ajax({
url: this.action,
data: {
account:account,
pwd:pwd,
verify:verify
},
type: 'post',
dataType: 'json',
success: function (rem) {
if (rem.code == 200 || rem.status == 200) {
window.location.href = rem.data.url || '/admin/index/index.html';
}else{
$('#verify_img').attr('src',src + '?' + Date.parse(new Date()));
layer.msg(rem.msg);
}
},
error: function (err) {
layer.msg('系统错误');
}
})
return false;
})
})
</script>
集成之后的页面：
有需要源码的同学在评论区留言或者私信我吧。
我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。
往期文章分享：
微信小程序授权登录适配wx.getUserProfile最新代码
程序员搞笑的段子，总有一条戳中你的笑点