发布时间：2026-07-21阅读(1)
序言：不要再为找不到好看的后台页面发愁了，一款非常大气的后台登录页面，自适应手机端，赶紧收藏转发吧。
简介：一款带粒子特效和星空背景的html5登录页面，鼠标在页面移动时，会有粒子的跟随效果，整体搭配还是比较大气的，喜欢的童鞋请收下吧。
效果图：
代码：
html
<!DOCTYPE html><html lang="en" ><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 ><div ><div id="large-header" ><canvas id="demo-canvas"></canvas><div ><h3>欢迎登录</h3><form action="#" name="f" method="post"><div ><span ></span><input name="logname" style="color: #FFFFFF !important" type="text" placeholder="请输入账户"></div><div ><span ></span><input name="logpass" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码"></div><div ><a 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最新代码
程序员搞笑的段子，总有一条戳中你的笑点
Copyright © 2024 有趣生活 All Rights Reserve吉ICP备19000289号-5 TXT地图HTML地图XML地图
