2015 a dazzling html5 special effect on New Year's Day and 2015 a special html5 special effect on New Year's Day
Effect Web site: http://keleyi.com/keleyi/phtml/html5/5.htm
Code:
Html code
- <! DOCTYPE html>
- <Html xmlns = "http://www.w3.org/1999/xhtml">
- <Head>
- <Title> A dazzling html5 special effect in 2015 on New Year's Day-ke leyi </title> <base target = "_ blank"/>
- <Script type = "text/javascript"> 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-) * (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>
- <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>
- </Head>
- <Body>
- <Div> <a href = "http://keleyi.com/"> Home </a> <a href = "http://keleyi.com/a/bjad/8e9jd0u5.htm"> original </a> <a href = "http://keleyi.com/keleyi/phtml/"> special effect Library </a> what can I do with 1 kb Javascript? </Div>
- <Div id = "text"> </div>
- <Canvas id = "keleyi_com"> </canvas>
- </Body>
- </Html>
Special effects:
