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

[网页设计]酷炫Html5旋转代码【转】


<!DOCTYPE html><html> <head>  <meta charset='utf-8' />  <!-- js引用包 -->  <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script><style>> body {  margin: 0;  overflow: hidden}div {  padding: 1px 5px;  background: #333;  position: absolute;  z - index: 2;  color: #555;  font - family: arial}a {  color: #ccf}a: hover {  color: red}</style> <script>window.onload = function() {  C = Math.cos;  S = Math.sin;  U = 0;  w = window;  j = document;  d = j.getElementById("kele" + "yi_com");  c = d.getContext("2d");  W = d.width = w.innerWidth;  H = d.height = w.innerHeight;  c.fillRect(0, 0, W, H);  c.globalCompositeOperation = "lighter";  c.lineWidth = 0.2;  c.lineCap = "round";  var bool = 0,  t = 0;  d.onmousemove = function(e) {    if (window.T) {      if (D == 9) {        D = Math.random() * 15;        f(1);      }      clearTimeout(T);    }    X = e.pageX;    Y = e.pageY;    a = 0;    b = 0;    A = X,    B = Y;    R = (e.pageX / W * 999 >> 0) / 999;    r = (e.pageY / H * 999 >> 0) / 999;    U = e.pageX / H * 360 >> 0;    D = 9;    g = 360 * Math.PI / 180;    T = setInterval(f = function(e) {      c.save();      c.globalCompositeOperation = "source-over";      if (e != 1) {        c.fillStyle = "rgba(0,0,0,0.02)";        c.fillRect(0, 0, W, H);      }      c.restore();      i = 25;      while (i--) {        c.beginPath();        if (D > 450 || bool) {          if (!bool) {            bool = 1;          }          if (D < 0.1) {            bool = 0;          }          t -= g;          D -= 0.1;        }        if (!bool) {          t += g;          D += 0.1;        }        q = (R / r - 1) * t;        x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R);        y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));        if (a) {          c.moveTo(a, b);          c.lineTo(x, y)        }        c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)";        c.stroke();        a = x;        b = y;      }      U -= 0.5;      A = X;      B = Y;    },    16);  }  j.onkeydown = function(e) {    a = b = 0;    R += 0.05  }  d.onmousemove({    pageX: 300,    pageY: 290  })}</script></head> <body>  <div id="text"></div>   <canvas id="keleyi_com"></canvas>   </body></html>