目录
suibi

html背景图片全屏特效代码(超简单的网页设计方法)


序言:不要再为找不到好看的后台页面发愁了,一款非常大气的后台登录页面,自适应手机端,赶紧收藏转发吧。

简介:一款带粒子特效和星空背景的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>

集成之后的页面:

有需要源码的同学在评论区留言或者私信我吧。

我是小程序软件开发,每天分享开发过程中遇到的知识点,如果对你有帮助的话,帮忙点个赞再走呗,非常感谢。


写笔记

咨询

您的电子邮箱地址不会被公开。