html背景素材(基于Layui蓝色全屏粒子线条动画背景后台登录界面模板)

野许雅居

2022-04-20 20:08:03

前言:昨天发了一个html5的后台登录页面，很受大家欢迎。今天分享一个非常漂亮的后台登录页面，也是一款自适应手机。希望你能喜欢，赶紧收藏转发。

html5 star 空背景的登录页面有粒子效果，适合后台管理系统的登录。

介绍:后台登录界面模板基于Layui蓝色全屏粒子线动画背景，具有登录表单验证功能。

效果图:

网页背景素材

代码:

超文本标记语言

<div class="layui-container"> <div class="admin-login-background"> <div class="layui-form login-form"> <form class="layui-form" action=""> <div class="layui-form-item logo-title"> <h1>一间闲置后台管理系统</h1> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-username" for="username"></label> <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin"> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-password" for="password"></label> <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="123456"> </div> <div class="layui-form-item"> <label class="layui-icon layui-icon-vercode" for="captcha"></label> <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg"> <div class="captcha-img"> <img src="img/valicode.jpg" /> </div> </div> <div class="layui-form-item"> <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码"> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登入</button> </div> </form> </div> </div> </div>

js& ltdiv class = & # 34la yui-container & # 34；& gt & lt；div class = & # 34管理-登录-后台& # 34；& gt & lt；div class = & # 34layui-表单登录-表单& # 34；& gt & lt；form class = & # 34拉易-form & # 34；action = & # 34"& gt & lt；div class = & # 34layui-表单-项目徽标-标题& # 34；& gt & lt；h1 & gt一个空闲的后台管理系统

& lt脚本& gt layui . use([& # 39；表格& # 39；]，function(){ var form = layui . form， layer = layui . layer； //当登录过期时，跳出ifram框架 if (top.location！= self . location)top . location = self . location； //粒子线背景 $(文档)。ready(function(){ $(& # 39；。拉易-集装箱& # 39；).particle ground({ dot color:& # 39；# 7 EC 7 FD & # 39；， line color:& # 39；# 7 EC 7 FD & # 39； })； })； //执行登录操作 form . on(& # 39；提交(登录)& # 39；，function(data){ data = data . field； if(data . username = = & # 39；'){ layer . msg(& # 39；用户名不能是空& # 39；); 返回false } if(data . password = = & # 39；'){ layer . msg(& # 39；密码不能是空& # 39；); 返回false } if(data . captcha = = & # 39；'){ layer . msg(& # 39；验证码不能是空& # 39；); 返回false } layer . msg(& # 39；登录成功& # 39；，function(){ })；返回false })； })； & lt；/script & gt；钢性铸铁

.login-form .layui-form-item label

.login-form .layui-form-item input

.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>

有需要源码的同学在评论区留言或者私信我吧。& ltstyle & gt html，body { width:100%；身高:100%；overflow:hidden } body { background:# 1e 9 fff；} body:在{ content:& # 39；'；背景-重复:不重复；背景-尺寸:封面；-WebKit-filter:blur(3px)；-moz-filter:blur(3px)；-o-滤镜:模糊(3px)；-ms-filter:blur(3px)；滤镜:模糊(3px)；位置:绝对；top:0；左:0；右:0；底部:0；z索引:-1；} 。la yui-容器{宽度:100%；身高:100%；溢出:隐藏} 。管理-登录-后台{ width:360 px；高度:300px位置:绝对；左:50%；top:40%；左边距:-180 px；边距-顶部:-100px；} 。logo-title { text-align:center；字母间距:2px填充:14px 0；} 。徽标-标题h1 { color:# 1e 9 fff；字体大小:25px字体粗细:粗体；} 。登录表单{ background-color:# fff；边框:1px solid # fff边框半径:3px填充:14px 20pxbox-shadow:0 0 8px # eeeeee；} 。登录表单。layui-form-item { position:relative；} 。登录表单。layui-form-item标签{ position:absolute；左:1pxtop:1px；宽度:38px行高:36px文本对齐:居中；颜色:# d2d2d2} 。登录表单。layui-form-item input { padding-left:36px；} 。验证码{宽度:60%；显示:内嵌-块；} 。captcha-img { display:inline-block；宽度:34%；浮动:对；} 。captcha-img img {身高:34px边框:1px纯色# e6e6e6高度:36px宽度:100%；} & lt；/style & gt；需要源码的同学可以在评论区留言或者私信我。

我是一个小程序软件开发人员，每天分享开发过程中遇到的知识点。如果对你有帮助，请在离开前给我一个赞。谢谢您们。

往期文章分享:

程序员的搞笑段子总会在你的笑容中有一拳。

微信小程序授权登录适配wx.getUserProfile最新代码

网页背景素材