完整源码详见
微信公众号：创享日记
对话框发送：登录页面
获取HTML+CSS+js等源码文件
一、彩虹气泡登录页面
效果图：
HTML源码：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>彩色气泡登录页</title></head> <body> <section> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="box"> <div class="circle" style="--x:0"></div> <div class="circle" style="--x:1"></div> <div class="circle" style="--x:2"></div> <div class="circle" style="--x:3"></div> <div class="circle" style="--x:4"></div> <div class="container"> <div class="form"> <h2>登录</h2> <form> <div class="inputBox"> <input type="text" placeholder="姓名"> </div> <div class="inputBox"> <input type="password" placeholder="密码"> </div> <div class="inputBox"> <input type="submit" value="登录"> </div> <p class="forget">忘记密码" />
HTML源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>登录界面</title><link href="css/default.css" rel="stylesheet" type="text/css" /><link href="css/styles.css" rel="stylesheet" type="text/css" /><link href="css/demo.css" rel="stylesheet" type="text/css" /><link href="css/loaders.css" rel="stylesheet" type="text/css" /></head><body><div class='login'><div class='login_title'><span>管理员登录</span></div><div class='login_fields'><div class='login_fields__user'><div class='icon'><img alt="" src='img/user_icon_copy.png'></div><input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" /><div class='validation'><img alt="" src='img/tick.png'></div></div><div class='login_fields__password'><div class='icon'><img alt="" src='img/lock_icon_copy.png'></div><input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off"><div class='validation'><img alt="" src='img/tick.png'></div></div><div class='login_fields__password'><div class='icon'><img alt="" src='img/key.png'></div><input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off"><div class='validation' style="opacity: 1; right: -5px;top: -3px;"><canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas></div></div><div class='login_fields__submit'><input type='button' value='登录'></div></div><div class='success'></div><div class='disclaimer'><p>欢迎登陆后台管理系统</p></div></div><div class='authent'><div class="loader" style="height: 44px;width: 44px;margin-left: 28px;"><div class="loader-inner ball-clip-rotate-multiple"><div></div><div></div><div></div></div></div><p>认证中...</p></div><div class="OverWindows"></div><link href="layui/css/layui.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script><script type="text/javascript" src="layui/layui.js"></script><script type="text/javascript" src="js/Particleground.js"></script><script type="text/javascript" src="Js/Treatment.js"></script><script type="text/javascript" src="js/jquery.mockjax.js"></script><script type="text/javascript">var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用 1 启用//默认账号密码var truelogin = "kbcxy";var truepwd = "1";var CodeVal = 0;Code();function Code() {if(canGetCookie == 1) {createCode("AdminCode");var AdminCode = getCookieValue("AdminCode");showCheck(AdminCode);} else {showCheck(createCode(""));}}function showCheck(a) {CodeVal = a;var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.clearRect(0, 0, 1000, 1000);ctx.font = "80px 'Hiragino Sans GB'";ctx.fillStyle = "#E8DFE8";ctx.fillText(a, 0, 100);}$(document).keypress(function(e) {// 回车键事件 if(e.which == 13) {$('input[type="button"]').click();}});var open = 0;layui.use('layer', function() {//非空验证$('input[type="button"]').click(function() {var login = $('input[name="login"]').val();var pwd = $('input[name="pwd"]').val();var code = $('input[name="code"]').val();if(login == '') {ErroAlert('请输入您的账号');} else if(pwd == '') {ErroAlert('请输入密码');} else if(code == '' || code.length != 4) {ErroAlert('输入验证码');} else {//登陆var JsonData = {login: login,pwd: pwd,code: code};//$.post("url",JsonData,function(data) {console.log(111);alert("登录成功");//window.location.href = 'http://127.0.0.1:8020/jQueryLogin/index.html?__hbt=1567408106021';//});}})})//全屏var fullscreen = function() {elem = document.body;if(elem.webkitRequestFullScreen) {elem.webkitRequestFullScreen();} else if(elem.mozRequestFullScreen) {elem.mozRequestFullScreen();} else if(elem.requestFullScreen) {elem.requestFullscreen();} else {//浏览器不支持全屏API或已被禁用 }}</script><script type="text/javascript" src="img/ThreeWebGL.js"></script><script type="text/javascript" src="img/ThreeExtras.js"></script><script type="text/javascript" src="img/Detector.js"></script><script type="text/javascript" src="img/RequestAnimationFrame.js"></script><script id="vs" type="x-shader/x-vertex">varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }</script><script id="fs" type="x-shader/x-fragment"></script><script type="text/javascript">if(!Detector.webgl) Detector.addGetWebGLMessage();var canvas = document.createElement('canvas');canvas.width = 32;canvas.height = window.innerHeight;var context = canvas.getContext('2d');var gradient = context.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, "#1e4877");gradient.addColorStop(0.5, "#4584b4");context.fillStyle = gradient;context.fillRect(0, 0, canvas.width, canvas.height);document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';var container;var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],sprite, size, x, y, z;var mouseX = 0,mouseY = 0;var start_time = new Date().getTime();var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;init();animate();function init() {container = document.createElement('div');document.body.appendChild(container);camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);camera.position.z = 6000;scene = new THREE.Scene();geometry = new THREE.Geometry();var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAABJRU5ErkJggg==');texture.magFilter = THREE.LinearMipMapLinearFilter;texture.minFilter = THREE.LinearMipMapLinearFilter;var fog = new THREE.Fog(0x4584b4, -100, 3000);material = new THREE.MeshShaderMaterial({uniforms: {"map": {type: "t",value: 2,texture: texture},"fogColor": {type: "c",value: fog.color},"fogNear": {type: "f",value: fog.near},"fogFar": {type: "f",value: fog.far},},vertexShader: document.getElementById('vs').textContent,fragmentShader: document.getElementById('fs').textContent,depthTest: false});var plane = new THREE.Mesh(new THREE.Plane(64, 64));for(i = 0; i < 8000; i++) {plane.position.x = Math.random() * 1000 - 500;plane.position.y = -Math.random() * Math.random() * 200 - 15;plane.position.z = i;plane.rotation.z = Math.random() * Math.PI;plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;GeometryUtils.merge(geometry, plane)}mesh = new THREE.Mesh(geometry, material);scene.addObject(mesh);mesh = new THREE.Mesh(geometry, material);mesh.position.z = -8000;scene.addObject(mesh);renderer = new THREE.WebGLRenderer({antialias: false});renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);document.addEventListener('mousemove', onDocumentMouseMove, false);window.addEventListener('resize', onWindowResize, false)}function onDocumentMouseMove(event) {mouseX = (event.clientX - windowHalfX) * 0.25;mouseY = (event.clientY - windowHalfY) * 0.15}function onWindowResize(event) {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight)}function animate() {requestAnimationFrame(animate);render()}function render() {position = ((new Date().getTime() - start_time) * 0.03) % 8000;camera.position.x += (mouseX - camera.target.position.x) * 0.01;camera.position.y += (-mouseY - camera.target.position.y) * 0.01;camera.position.z = -position + 8000;camera.target.position.x = camera.position.x;camera.target.position.y = camera.position.y;camera.target.position.z = camera.position.z - 1000;renderer.render(scene, camera)}</script></body></html>
三、深海灯光水母
效果图：
HTML源码：
<!doctype html><html><head><meta charset="utf-8"><title>登录</title><link rel="stylesheet" href="lib/layui/css/layui.css" media="all" /><link rel="stylesheet" href="css/login.css" /><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.pure.tooltips.js"></script><script type="text/javascript" src="lib/layui/layui.js"></script><style>html,body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}.container{ width: 100％; height: 100%; margin: 0; padding: 0; background-color: #000000;}.box { width:450px; height:295px; background:#000000; position:absolute; top:50%; left:50%; margin-left:-14%; margin-top:-10%; z-index:3;opacity: 0.6;}</style></head><body><div id="jsi-jellyfish-container" class="container"><div class="beg-login-box box"> <header> <h1 style="color:#FFFFFF">欢迎登录</h1> </header> <div class="beg-login-main"> <form action="" class="layui-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81" /> <div class="layui-form-item"> <label class="beg-login-icon"> <i class="layui-icon"></i> </label> <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入登录名" class="layui-input"> </div> <div class="layui-form-item"> <label class="beg-login-icon"> <i class="layui-icon"></i> </label> <input id="login-password" type="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码" class="layui-input"> </div> <div class="layui-form-item"> <div class="beg-pull-left beg-login-remember" style="color:#FFFFFF;margin-top: 9%;"> <label>记住帐号？</label> <input type="checkbox" name="rememberMe" lay-skin="switch" lay-text="ON|OFF" checked> </div> <div class="beg-pull-right"> <button class="layui-btn layui-btn-primary" lay-submit lay-filter="login" style="margin-top: 33%;" onclick="login()"> <i class="layui-icon"></i> 登录 </button> </div> <div class="beg-clear"></div> </div> </form> </div> <footer> </footer> </div><script>var RENDERER = { JELLYFISH_RATE: 0.00015, DUST_RATE: 0.0005, ADJUST_DISTANCE : 100, ADJUST_OFFSET : 5, init : function(){ this.setParameters(); this.reconstructMethod(); this.createElements(); this.bindEvent(); this.render(); }, setParameters : function(){ this.$window = $(window); this.$container = $('#jsi-jellyfish-container'); this.width = this.$container.width(); this.height = this.$container.height(); this.radius = Math.sqrt(Math.pow(this.width / 2, 2) + Math.sqrt(this.height/ 2, 2)); this.distance = Math.sqrt(Math.pow(this.width, 2) + Math.sqrt(this.height, 2)); this.canvas = $('').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0); this.context = this.canvas.getContext('2d'); this.jellyfishes = []; this.theta = 0; this.x = 0; this.y = 0; this.destinationX = this.x; this.destinationY = this.y; this.dusts = []; }, reconstructMethod : function(){ this.render = this.render.bind(this); }, getRandomValue : function(range){ return range.min + (range.max - range.min) * Math.random(); }, createElements : function(){ for(var i = 0, length = this.JELLYFISH_RATE * this.width * this.height; i < length; i++){ this.jellyfishes.push(new JELLYFISH(this)); } for(var i = 0, length = this.DUST_RATE * this.width * this.height; i < length; i++){ this.dusts.push(new DUST(this)); } }, bindEvent : function(){ this.$container.on('mousemove', this.translateCenter.bind(this, false)); this.$container.on('mouseout', this.translateCenter.bind(this, true)); }, translateCenter : function(toAdjust, event){ var offset = this.$container.offset(); this.destinationX = event.clientX - offset.left + this.$window.scrollLeft(); this.destinationY = event.clientY - offset.top + this.$window.scrollTop(); if(!toAdjust){ return; } if(this.destinationX < this.ADJUST_OFFSET){ this.destinationX = 0; }else if(this.radius > this.width - this.ADJUST_OFFSET){ this.destinationX = this.width; } if(this.destinationY < this.ADJUST_OFFSET){ this.destinationY = 0; }else if(this.radius > this.height - this.ADJUST_OFFSET){ this.destinationY = this.height; } }, var opacity = 0.1 + 0.9 * Math.pow(1 - Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2), feelerColor = 'hsla(240, 80%, 80%, ' + 0.5 * opacity + ')', patternColor = 'hsla(240, 80%, 80%, ' + 0.8 * opacity + ')', gradient = context.createRadialGradient(0, this.baseCPY, 0, 0, this.baseCPY, this.baseY - this.baseCPY); gradient.addColorStop(0, 'hsla(245, 100%, 100%, ' + opacity + ')'); gradient.addColorStop(0.5, 'hsla(245, 100%, 80%, ' + 0.6 * opacity + ')'); gradient.addColorStop(1, 'hsla(245, 100%, 60%, ' + 0.4 * opacity + ')'); context.fillStyle = gradient; context.strokeStyle = patternColor; context.lineWidth = 2; createFeeler : function(context, feelerColor){ for(var i = -3; i <= 3; i++){ context.save(); context.beginPath(); context.strokeStyle = feelerColor; context.translate(i * 2, this.baseY); context.moveTo(0, 0); }, judgeToReset : function(){ if(this.x < -this.OFFSET_TO_JUDGE && this.vx < 0 || this.x > this.renderer.width + this.OFFSET_TO_JUDGE && this.vx > 0 || this.y < -this.OFFSET_TO_JUDGE && this.vy < 0 || this.y > this.renderer.height + this.OFFSET_TO_JUDGE && this.vy > 0){ this.init(false); } }};var DUST = function(renderer){ this.renderer = renderer; this.init();};DUST.prototype = { RADIUS : 5, VELOCITY : 0.1, init : function(){ var phi = this.renderer.getRandomValue({min : 0, max : Math.PI * 2}); this.x = this.renderer.getRandomValue({min : 0, max : this.renderer.width}); this.y = this.renderer.getRandomValue({min : 0, max : this.renderer.height}); this.vx = this.VELOCITY * Math.sin(phi); this.vy = this.VELOCITY * Math.cos(phi); this.opacity = 0; this.theta = 0; this.deltaTheta = this.renderer.getRandomValue({min : Math.PI / 500, max : Math.PI / 100}); this.gradient = this.renderer.context.createRadialGradient(0, 0, 0, 0, 0, this.RADIUS); this.gradient.addColorStop(0, 'hsla(220, 80%, 100%, 1)'); this.gradient.addColorStop(0.1, 'hsla(220, 80%, 80%, 1)'); this.gradient.addColorStop(0.25, 'hsla(220, 80%, 50%, 1)'); this.gradient.addColorStop(1, 'hsla(220, 80%, 30%, 0)'); }, render : function(context, x, y){ context.save(); context.translate(this.x, this.y); context.globalAlpha = Math.abs(Math.sin(this.theta)) * (0.2 + 0.8 * Math.pow(Math.min(1, Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2)) / this.renderer.distance), 2)); context.fillStyle = this.gradient; context.beginPath(); context.arc(0, 0, this.RADIUS, 0, Math.PI * 2, false); context.fill(); context.restore(); this.x += this.vx; this.y += this.vy; this.theta += this.deltaTheta; this.theta %= Math.PI * 2; if(this.x < -this.RADIUS || this.x > this.renderer.width + this.RADIUS || this.y < -this.RADIUS || this.y > this.renderer.height + this.RADIUS){ this.init(); } }};$(function(){ RENDERER.init(); layui.use(['layer', 'form'], function() { var layer = layui.layer, $ = layui.jquery, form = layui.form(); //自定义验证规则 form.verify({ userName: function(value){ if(value.trim().length < 6){ return '用户名不能少于6位'; } } ,password: [/(.+){6,12}$/, '密码必须6到12位'] }); });});</script></body></html>
四、炫酷星空
效果图：
HTML源码等详见下载
五、炫酷蜘蛛网
效果图：
HTML源码等详见下载