你的位置:首页 > 网页设计

[网页设计]HTML5 QQ登录背景动态图片


预览效果如图所示:

 

代码如下:

<!DOCTYPE html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>html5背景</title>    <style type="text/css">  *{margin:0;padding:0;list-style-type:none;}  a,img{border:0;}  </style>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script></head><body><div id="container" style="width:100%;height:700px;">  <div id="anitOut"></div></div><script type="text/javascript">$(function () {  if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {    $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",        function () {          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: "#FFFFFF",            speed: 0.0002          };          var G = {            count: 2,            xyScalar: 1,            zOffset: 100,            ambient: "#002c4a",            diffuse: "#005584",            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");          var w = document.getElementById("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();        })  } else {    alert('调用cav.js失败');  }});</script></body></html>