我又写了一个网页登录界面。需要引用jqury.min.js。
源代码贴在下面了，也可以在我的github上下载。
效果图：
login.html
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>应用平台</title><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="vector.js"></script></head><body><nav class="header" id="head"><img class="Logo" src="LOGO.jpg"><h1 class="LogoName">应用平台</h1></nav><div id="container"><div id="output"><div class="containerT"><h1>登录</h1><form class="form" id="entry_form"><div ><img src="user_account.png" width="33px" height="33px" style="vertical-align:middle;"/><input name="UserName" type="text" placeholder="请输入用户名" /></div><div><img src="user_password.png" width="33" height="33" style="vertical-align:middle;" /><input name="Password" type="text" placeholder="请输入密码" /></div></form><div class="memoryPasswordBox"><input type="checkbox" class="checkInput" /><span class="tipSpan">记住密码</span></div><button class="button" type="button" id="entry_btn">登录</button></div></div></div><div><script type="text/javascript">$(function(){Victor("container", "output"); //登录背景函数$("#entry_name").focus();$(document).keydown(function(event){if(event.keyCode==13){$("#entry_btn").click();}});});</script></div><div id="foot" ><span class="titleSpan">有限公司</span></div></body></html>
style.css
* {margin: 0;padding: 0;font-size: 13px;font-family: 黑体}html, body {width: 100%;height: 100%;background: #fff}#head{height: 90px;}.Logo{width: 90px;height: 90px;vertical-align: middle;}.LogoName {width: 90%;font-family: 华文行楷;white-space: nowrap; /* 不换行*/overflow: hidden; /*超出部分隐藏*/font-size: 60px;color: #00BFFF;display: inline;position: absolute;top: 18px;}#container {width: 100%;height: 80%;position: relative;left: 0;z-index: 999}#output {width: 100%;height: 100%}.containerT {width: 500px;height: 400px;text-align: center;position: absolute;top: 50%;left: 50%;margin: -150px 0 0 -200px;border-radius: 3px}.containerT h1 {font-size: 35px;font-family: 华文行楷, Arial, sans-serif;font-weight: 500}.memoryPasswordBox{}form {padding: 20px 0;position: relative;z-index: 2}form input{-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, .4);background-color: rgba(255, 255, 255, .2);width: 200px;border-radius: 10px;padding: 8px 15px;margin: 0 auto 10px;display: inline-block;text-align: center;font-size: 15px;-webkit-transition-duration: .25s;transition-duration: .25s;}form input:hover {background-color: rgba(255, 255, 255, .4)}form input:focus {background-color: #fff;width: 230px;color: #333}.tipSpan {font-size: 20px;font-family: 华文行楷;}.button {font-family: 华文行楷;background-color: #21a4ee;border: none;padding: 15px 32px;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 50%;}.button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}#foot{background-color: #2e9bff;border:0;height:50px;width:100%;position: relative;}.titleSpan{position: absolute;top:20px;font-size: 20px;right:40%;leat:40%;text-align: center;display: block;}
vector.js
CAV = {FRONT: 0, BACK: 1, DOUBLE: 2, SVGNS: "/2000/svg"};CAV.Array = typeof Float32Array === "function" ? Float32Array : Array;CAV.Utils = {isNumber: function (a) {return !isNaN(parseFloat(a)) && isFinite(a)}};(function () {for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];if (!window.requestAnimationFrame) window.requestAnimationFrame = function (b) {var c = (new Date).getTime(), f = Math.max(0, 16 - (c - a)), g = window.setTimeout(function () {b(c + f)}, f);a = c + f;return g};if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (a) {clearTimeout(a)}})();Math.PIM2 = Math.PI * 2;Math.PID2 = Math.PI / 2;Math.randomInRange = function (a, b) {return a + (b - a) * Math.random()};Math.clamp = function (a, b, c) {a = Math.max(a, b);return a = Math.min(a, c)};CAV.Vector3 = {create: function (a, b, c) {var d = new CAV.Array(3);this.set(d, a, b, c);return d}, clone: function (a) {var b = this.create();this.copy(b, a);return b}, set: function (a, b, c, d) {a[0] = b || 0;a[1] = c || 0;a[2] = d || 0;return this}, setX: function (a, b) {a[0] = b || 0;return this}, setY: function (a, b) {a[1] = b || 0;return this}, setZ: function (a, b) {a[2] = b || 0;return this}, copy: function (a, b) {a[0] = b[0];a[1] = b[1];a[2] = b[2];return this}, add: function (a, b) {a[0] += b[0];a[1] += b[1];a[2] += b[2];return this}, addVectors: function (a, b, c) {a[0] = b[0] +c[0];a[1] = b[1] + c[1];a[2] = b[2] + c[2];return this}, addScalar: function (a, b) {a[0] += b;a[1] += b;a[2] += b;return this}, subtract: function (a, b) {a[0] -= b[0];a[1] -= b[1];a[2] -= b[2];return this}, subtractVectors: function (a, b, c) {a[0] = b[0] - c[0];a[1] = b[1] - c[1];a[2] = b[2] - c[2];return this}, subtractScalar: function (a, b) {a[0] -= b;a[1] -= b;a[2] -= b;return this}, multiply: function (a, b) {a[0] *= b[0];a[1] *= b[1];a[2] *= b[2];return this}, multiplyVectors: function (a, b, c) {a[0] = b[0] * c[0];a[1] = b[1] * c[1];a[2] = b[2] * c[2];return this}, multiplyScalar: function (a, b) {a[0] *= b;a[1] *= b;a[2] *= b;return this}, divide: function (a, b) {a[0] /= b[0];a[1] /= b[1];a[2] /= b[2];return this}, divideVectors: function (a, b, c) {a[0] = b[0] / c[0];a[1] = b[1] / c[1];a[2] = b[2] / c[2];return this}, divideScalar: function (a, b) {b !== 0 ? (a[0] /= b, a[1] /= b, a[2] /= b) : (a[0] = 0, a[1] = 0, a[2] = 0);return this}, cross: function (a, b) {var c = a[0], d = a[1], e = a[2];a[0] = d * b[2] - e * b[1];a[1] = e * b[0] - c * b[2];a[2] = c * b[1] - d * b[0];return this}, crossVectors: function (a, b, c) {a[0] = b[1] * c[2] - b[2] * c[1];a[1] = b[2] * c[0] - b[0] * c[2];a[2] = b[0] * c[1] - b[1] * c[0];return this}, min: function (a, b) {a[0] < b && (a[0] = b);a[1] < b && (a[1] = b);a[2] < b && (a[2] = b);return this}, max: function (a, b) {a[0] > b && (a[0] = b);a[1] > b && (a[1] = b);a[2] > b && (a[2] = b);return this}, clamp: function (a, b, c) {this.min(a, b);this.max(a, c);return this}, limit: function (a, b, c) {var d = this.length(a);b !== null && d < b ? this.setLength(a, b) : c !== null && d > c && this.setLength(a, c);return this}, dot: function (a, b) {return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]}, normalise: function (a) {return this.divideScalar(a, this.length(a))}, negate: function (a) {return this.multiplyScalar(a, -1)}, distanceSquared: function (a, b) {var c = a[0] - b[0], d = a[1] - b[1], e = a[2] - b[2];return c * c + d * d + e * e}, distance: function (a, b) {return Math.sqrt(this.distanceSquared(a, b))}, lengthSquared: function (a) {return a[0] * a[0] + a[1] * a[1] + a[2] * a[2]}, length: function (a) {return Math.sqrt(this.lengthSquared(a))}, setLength: function (a, b) {var c = this.length(a);c !== 0 && b !== c && this.multiplyScalar(a, b / c);return this}};CAV.Vector4 = {create: function (a, b, c) {var d = new CAV.Array(4);this.set(d, a, b, c);return d}, set: function (a, b, c, d, e) {a[0] = b || 0;a[1] = c || 0;a[2] = d || 0;a[3] = e || 0;return this}, setX: function (a, b) {a[0] = b || 0;return this}, setY: function (a, b) {a[1] = b || 0;return this}, setZ: function (a, b) {a[2] = b || 0;return this}, setW: function (a, b) {a[3] = b || 0;return this}, add: function (a, b) {a[0] += b[0];a[1] += b[1];a[2] += b[2];a[3] += b[3];return this}, multiplyVectors: function (a, b, c) {a[0] = b[0] * c[0];a[1] = b[1] * c[1];a[2] = b[2] * c[2];a[3] = b[3] * c[3];return this}, multiplyScalar: function (a, b) {a[0] *= b;a[1] *= b;a[2] *= b;a[3] *= b;return this}, min: function (a, b) {a[0] < b && (a[0] = b);a[1] < b && (a[1] = b);a[2] < b && (a[2] = b);a[3] < b && (a[3] = b);return this}, max: function (a, b) {a[0] > b && (a[0] = b);a[1] > b && (a[1] = b);a[2] > b && (a[2] = b);a[3] > b && (a[3] = b);return this}, clamp: function (a, b, c) {this.min(a, b);this.max(a, c);return this}};CAV.Color = function (a, b) {this.rgba = CAV.Vector4.create();this.hex = a || "#000000";this.opacity = CAV.Utils.isNumber(b) ? b : 1;this.set(this.hex, this.opacity)};CAV.Color.prototype = {set: function (a, b) {var a = a.replace("#", ""), c = a.length / 3;this.rgba[0] = parseInt(a.substring(c * 0, c * 1), 16) / 255;this.rgba[1] = parseInt(a.substring(c * 1, c * 2), 16) / 255;this.rgba[2] = parseInt(a.substring(c * 2, c * 3), 16) / 255;this.rgba[3] = CAV.Utils.isNumber(b) ? b : this.rgba[3];return this}, hexify: function (a) {a = Math.ceil(a * 255).toString(16);a.length === 1 && (a = "0" + a);return a}, format: function () {var a = this.hexify(this.rgba[0]), b = this.hexify(this.rgba[1]), c = this.hexify(this.rgba[2]);return this.hex = "#" +a + b + c}};CAV.Object = function () {this.position = CAV.Vector3.create()};CAV.Object.prototype = {setPosition: function (a, b, c) {CAV.Vector3.set(this.position, a, b, c);return this}};CAV.Light = function (a, b) {CAV.Object.call(this);this.ambient = new CAV.Color(a || "#FFFFFF");this.diffuse = new CAV.Color(b || "#FFFFFF");this.ray = CAV.Vector3.create()};CAV.Light.prototype = Object.create(CAV.Object.prototype);CAV.Vertex = function (a, b, c) {this.position = CAV.Vector3.create(a, b, c)};CAV.Vertex.prototype = {setPosition: function (a, b, c) {CAV.Vector3.set(this.position, a, b, c);return this}};CAV.Triangle = function (a, b, c) {this.a = a || new CAV.Vertex;this.b = b || new CAV.Vertex;this.c = c || new CAV.Vertex;this.vertices = [this.a, this.b, this.c];this.u = CAV.Vector3.create();this.v = CAV.Vector3.create();this.centroid = CAV.Vector3.create();this.normal = CAV.Vector3.create();this.color = new CAV.Color;this.polygon = document.createElementNS(CAV.SVGNS, "polygon");this.polygon.setAttributeNS(null, "stroke-linejoin", "round");this.polygon.setAttributeNS(null, "stroke-miterlimit", "1");this.polygon.setAttributeNS(null, "stroke-width", "1");puteCentroid();puteNormal()};CAV.Triangle.prototype = {computeCentroid: function () {this.centroid[0] = this.a.position[0] + this.b.position[0] + this.c.position[0];this.centroid[1] = this.a.position[1] + this.b.position[1] + this.c.position[1];this.centroid[2] = this.a.position[2] + this.b.position[2] + this.c.position[2];CAV.Vector3.divideScalar(this.centroid, 3);return this}, computeNormal: function () {CAV.Vector3.subtractVectors(this.u, this.b.position, this.a.position);CAV.Vector3.subtractVectors(this.v, this.c.position, this.a.position);CAV.Vector3.crossVectors(this.normal, this.u, this.v);CAV.Vector3.normalise(this.normal);return this}};CAV.Geometry = function () {this.vertices = [];this.triangles = [];this.dirty = false};CAV.Geometry.prototype = {update: function () {if (this.dirty) {var a, b;for (a = this.triangles.length - 1; a >= 0; a--) b = this.triangles[a], puteCentroid(), puteNormal();this.dirty = false}return this}};CAV.Plane = function (a, b, c, d) {CAV.Geometry.call(this);this.width = a || 100;this.height = b || 100;this.segments = c || 4;this.slices = d || 4;this.segmentWidth = this.width / this.segments;this.sliceHeight = this.height / this.slices;var e, f, g, c = [];e = this.width * -0.5;f = this.height * 0.5;for (a = 0; a <= this.segments; a++) {c.push([]);for (b = 0; b <= this.slices; b++) d = new CAV.Vertex(e + a * this.segmentWidth, f - b * this.sliceHeight), c[a].push(d), this.vertices.push(d)}for (a = 0; a < this.segments; a++) for (b = 0; b < this.slices; b++) d = c[a + 0][b + 0], e = c[a + 0][b +1], f = c[a + 1][b + 0], g = c[a + 1][b + 1], t0 = new CAV.Triangle(d, e, f), t1 = new CAV.Triangle(f, e, g), this.triangles.push(t0, t1)};CAV.Plane.prototype = Object.create(CAV.Geometry.prototype);CAV.Material = function (a, b) {this.ambient = new CAV.Color(a || "#444444");this.diffuse = new CAV.Color(b || "#FFFFFF");this.slave = new CAV.Color};CAV.Mesh = function (a, b) {CAV.Object.call(this);this.geometry = a || new CAV.Geometry;this.material = b || new CAV.Material;this.side = CAV.FRONT;this.visible = true};CAV.Mesh.prototype = Object.create(CAV.Object.prototype);CAV.Mesh.prototype.update = function (a, b) {var c, d, e, f, g;this.geometry.update();if (b) for (c = this.geometry.triangles.length - 1; c >= 0; c--) {d = this.geometry.triangles[c];CAV.Vector4.set(d.color.rgba);for (e = a.length - 1; e >= 0; e--) f = a[e], CAV.Vector3.subtractVectors(f.ray, f.position, d.centroid), CAV.Vector3.normalise(f.ray), g = CAV.Vector3.dot(d.normal, f.ray), this.side === CAV.FRONT ? g = Math.max(g, 0) : this.side === CAV.BACK ? g = Math.abs(Math.min(g, 0)) : this.side === CAV.DOUBLE && (g = Math.max(Math.abs(g), 0)), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.ambient.rgba, f.ambient.rgba), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba), CAV.Vector4.multiplyVectors(this.material.slave.rgba, this.material.diffuse.rgba, f.diffuse.rgba), CAV.Vector4.multiplyScalar(this.material.slave.rgba, g), CAV.Vector4.add(d.color.rgba, this.material.slave.rgba);CAV.Vector4.clamp(d.color.rgba, 0, 1)}return this};CAV.Scene = function () {this.meshes = [];this.lights = []};CAV.Scene.prototype = {add: function (a) {a instanceof CAV.Mesh && !~this.meshes.indexOf(a) ? this.meshes.push(a) : a instanceof CAV.Light && !~this.lights.indexOf(a) && this.lights.push(a);return this}, remove: function (a) {a instanceof CAV.Mesh && ~this.meshes.indexOf(a) ? this.meshes.splice(this.meshes.indexOf(a), 1) : a instanceof CAV.Light && ~this.lights.indexOf(a) && this.lights.splice(this.lights.indexOf(a), 1);return this}};CAV.Renderer = function () {this.halfHeight = this.halfWidth = this.height = this.width = 0};CAV.Renderer.prototype = {setSize: function (a, b) {if (!(this.width === a && this.height === b)) return this.width = a, this.height = b, this.halfWidth = this.width * 0.5, this.halfHeight = this.height * 0.5, this}, clear: function () {return this}, render: function () {return this}};CAV.CanvasRenderer = function () {CAV.Renderer.call(this);this.element = document.createElement("canvas");this.element.style.display = "block";this.context = this.element.getContext("2d");this.setSize(this.element.width, this.element.height)};CAV.CanvasRenderer.prototype = Object.create(CAV.Renderer.prototype);CAV.CanvasRenderer.prototype.setSize = function (a, b) {CAV.Renderer.prototype.setSize.call(this, a, b);this.element.width = a;this.element.height = b;this.context.setTransform(1, 0, 0, -1, this.halfWidth, this.halfHeight);return this};CAV.CanvasRenderer.prototype.clear = function () {CAV.Renderer.prototype.clear.call(this);this.context.clearRect(-this.halfWidth, -this.halfHeight, this.width, this.height);return this};CAV.CanvasRenderer.prototype.render = function (a) {CAV.Renderer.prototype.render.call(this, a);var b, c, d, e, f;this.clear();this.context.lineJoin = "round";this.context.lineWidth = 1;for (b = a.meshes.length - 1; b >= 0; b--) if (c = a.meshes[b], c.visible) {c.update(a.lights, true);for (d = c.geometry.triangles.length - 1; d >= 0; d--) e = c.geometry.triangles[d], f = e.color.format(), this.context.beginPath(), this.context.moveTo(e.a.position[0], e.a.position[1]), this.context.lineTo(e.b.position[0], e.b.position[1]), this.context.lineTo(e.c.position[0], e.c.position[1]), this.context.closePath(), this.context.strokeStyle = f, this.context.fillStyle = f, this.context.stroke(), this.context.fill()}return this};function Victor(container, anitOut) {if (!!document.createElement("canvas").getContext) {var t = {width: 1.5,height: 1.5,depth: 10,segments: 12,slices: 6,xRange: 0.8,yRange: 0.1,zRange: 1,ambient: "#525252",diffuse: "#A5A5A5",speed: 0.0002};var G = {count: 2,xyScalar: 1,zOffset: 100,ambient: "#1c8bff",diffuse: "#1c8bff",speed: 0.001,gravity: 1200,dampening: 0.95,minLimit: 10,maxLimit: null,minDistance: 20,maxDistance: 400,autopilot: false,draw: false,bounds: CAV.Vector3.create(),step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))};var m = "canvas";var E = "svg";var x = {renderer: m};var i, n = Date.now();var L = CAV.Vector3.create();var k = CAV.Vector3.create();var z = document.getElementById(container || "container");var w = document.getElementById(anitOut || "anitOut");var D, I, h, q, y;var g;var r;function C() {F();p();s();B();v();K(z.offsetWidth, z.offsetHeight);o()}function F() {g = new CAV.CanvasRenderer();H(x.renderer)}function H(N) {if (D) {w.removeChild(D.element)}switch (N) {case m:D = g;break}D.setSize(z.offsetWidth, z.offsetHeight);w.appendChild(D.element)}function p() {I = new CAV.Scene()}function s() {I.remove(h);D.clear();q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);y = new CAV.Material(t.ambient, t.diffuse);h = new CAV.Mesh(q, y);I.add(h);var N, O;for (N = q.vertices.length - 1; N >= 0; N--) {O = q.vertices[N];O.anchor = CAV.Vector3.clone(O.position);O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));O.time = Math.randomInRange(0, Math.PIM2)}}function B() {var O, N;for (O = I.lights.length - 1; O >= 0; O--) {N = I.lights[O];I.remove(N)}D.clear();for (O = 0; O < G.count; O++) {N = new CAV.Light(G.ambient, G.diffuse);N.ambientHex = N.ambient.format();N.diffuseHex = N.diffuse.format();I.add(N);N.mass = Math.randomInRange(0.5, 1);N.velocity = CAV.Vector3.create();N.acceleration = CAV.Vector3.create();N.force = CAV.Vector3.create()}}function K(O, N) {D.setSize(O, N);CAV.Vector3.set(L, D.halfWidth, D.halfHeight);s()}function o() {i = Date.now() - n;u();M();requestAnimationFrame(o)}function u() {var Q, P, O, R, T, V, U, S = t.depth / 2;CAV.Vector3.copy(G.bounds, L);CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);CAV.Vector3.setZ(k, G.zOffset);for (R = I.lights.length - 1; R >= 0; R--) {T = I.lights[R];CAV.Vector3.setZ(T.position, G.zOffset);var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);var W = G.gravity * T.mass / N;CAV.Vector3.subtractVectors(T.force, k, T.position);CAV.Vector3.normalise(T.force);CAV.Vector3.multiplyScalar(T.force, W);CAV.Vector3.set(T.acceleration);CAV.Vector3.add(T.acceleration, T.force);CAV.Vector3.add(T.velocity, T.acceleration);CAV.Vector3.multiplyScalar(T.velocity, G.dampening);CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);CAV.Vector3.add(T.position, T.velocity)}for (V = q.vertices.length - 1; V >= 0; V--) {U = q.vertices[V];Q = Math.sin(U.time + U.step[0] * i * t.speed);P = Math.cos(U.time + U.step[1] * i * t.speed);O = Math.sin(U.time + U.step[2] * i * t.speed);CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);CAV.Vector3.add(U.position, U.anchor)}q.dirty = true}function M() {D.render(I)}function J(O) {var Q, N, S = O;var P = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.ambient.set(T);N.ambientHex = N.ambient.format()}};var R = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.diffuse.set(T);N.diffuseHex = N.diffuse.format()}};return {set: function () {P(S[0]);R(S[1])}}}function v() {window.addEventListener("resize", j)}function A(N) {CAV.Vector3.set(k, N.x, D.height - N.y);CAV.Vector3.subtract(k, L)}function j(N) {K(z.offsetWidth, z.offsetHeight);M()}C();}return J;}
