Web style--all kinds of cool effects continue to update ing ...

1.evanyou effect-ribbon implementation, the effect is as follows

Note: This is mainly used canvas canvas, click the background to draw new graphics, the code is as follows:

/*html Code: * * <canvas id= "evanyou" width= "1920" height= "934" ></canvas>/*css code: * * <style type= "Text/css"
        > #evanyou {position:fixed;
        width:100%;
        height:100%;
        left:0;
    top:0; } </style>/*JS Code: *//Evanyou effect var c = document.getElementById (' evanyou '), x = C.getcontext (' 2d '), PR = Window.devicepixelratio | |  1, W = window.innerwidth, h = window.innerheight, F =%, Q, M
        = Math, r = 0, u = m.pi * 2, v = m.cos, z = m.random;
        C.width = w * PR;
        C.height = h * PR;
        X.scale (PR, PR);
        X.globalalpha = 0.6; function Evanyou () {x.clearrect (0, 0, W, h) q = [{x:0, y:h *. 7 + F}, {x:0, y:h *. 7-f}
          while (Q[1].x < w + f) d (Q[0], q[1])} function D (i, j) {X.beginpath ()  X.moveto (i.x, I.Y) X.lineto (j.x, j.y) var k = j.x + (z () * 2-0.25) * F, n = y (  J.Y) X.lineto (k, N) X.closepath () R-= u/ -50 x.fillstyle = ' # ' + (V (r) * 127 + 128 << 16 | V (r + U/3) * 127 + 128 << 8 |
        V (r + U/3 * 2) * 127 + 128). ToString () X.fill () q[0] = q[1] q[1] = {x:k, y:n} } function y (p) {var t = p + (z () * 2-1.1) * F return (T > H | | | t < 0)? Y (P): t} document.onclick = evanyou Document.ontouchstart = evanyou evanyou ();

View Code

2. Return to top effects (scroll bar up or click will automatically hide and display), the effect is as follows:

Pictures to use:

The code is as follows: Http://files.cnblogs.com/files/shuai7boy/scroll.gif

HTML code: body> <!--back to top--> <div id= "back-to-top" class= "Red" data-scroll= "Body" style= "Top:-46px;colo" r:red; " > Back to top </div> <!--open page code--> <p>hello</p><p>hello</p><p>hello</p ><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p> hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p > <p>hello</p><p>hello</p><p>hello</p> <p>hello</p><p> hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p > <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p> Hello</p><p>hello</p> <p>hello</p><p>hello</p><p>hello</p ><p>hello</p><p>hello</p><p>hello</p> <!--above is the open page code-->//css style #back-to-top {position:fixed;
             right:50px;
             Z-index:9;
             width:70px;
             height:900px;
             Background:url ('/content/images/scroll.png ');  
             transition:0.5s;     
        Cursor:pointer;
        //js section: <script src= "~/scripts/jquery-1.8.2.min.js" ></script> <script type= "Text/javascript" > Window.onload = function () {//Use Data-scroll property to scroll to any DOM element $.scrollto = function (SCR Olldom, Scrolltime) {$ (scrolldom). Click (function () {var scrolltodom = $ (this). attr (
                    "Data-scroll");
                    $ (this). AddClass ("active"). Siblings (). Removeclass ("active"); $ (' HTML, Body '). Animate ({scrolltop: $ (scrolltodom). Offset (). Top}, Scrolltime
                    );
                return false;
            });
       };     Determine position control returns the top of the explicit hidden if ($ (window). Width () > 800) {//If the form is wider than Backto = $ ("#back-to
                -top ")//Get Back-to-top object var backheight = $ (window). Height ()-980 + ' px ';//Let window height minus 980 $ (window). Scroll (function () {if ($ (window). scrolltop () > M && backto.css (' top ') = = '-9
                    00px ') {backto.css (' top ', backheight);
                        else if ($ (window). scrolltop () <= && backto.css (' top ')!== ' -900px ') {
                    Backto.css (' top ', ' -900px ');

            }
                });

        }//Enable $.scrollto ("#back-to-top", 800); } </script>

View Code

3. Bottom left corner probe effect

PS: This picture in the bottom left corner of the page, the mouse moved up the probe effect, the code is as follows

HTML code
<div class= "XM" >
        
    </div>
// CSS code
 <style>
        xm{
            position:fixed;
            bottom:0;
            left:0;
            z-index:1;
            font-size:0;
            Transition:all 3s ease-in-out;           
            Transform:translatey (3px);           
        }
        . xm:hover{
            -webkit-transform:translatey (0);
            -ms-transform:translatey (0);
        }
        . XM img{
            width:50px;
        }
    </style>

View Code

4. Text Rollover effect (click Flip, start loading page also flip)

The code is as follows:

HTML code View Code
Typed.min.js Code:

!function (t) {"Use strict"; var s = function (S, e) {This.el = T (s), this.options = T.extend ({}, T.fn.typed.defaults, E ), This.isinput = this.el.is ("input"), this.attr = this.options.attr, This.showcursor = this.isinput?!1:this.options.s Howcursor, this.elcontent = this.attr? This.el.attr (this.attr): This.el.text (), This.contenttype = This.options.contentType, This.typespeed = This.options.typeSpeed, This.startdelay = this.options.startDelay, this.backspeed = This.options.backSpeed, This.backdelay = this.options.backDelay, this.stringselement = this.options.stringsElement, this.strings = this.options.strings, This.strpos = 0, This.arraypos = 0, This.stopnum = 0, This.loop = this.options.loop, This.loopcount = this.options.loopCount, This.curloop = 0, This.stop =! 1, This.cursorchar = This.options.cursorChar, This.shuffle = this . options.shuffle, this.sequence = [], This.build ()}; S.prototype = {constructor:s, init:function () {var t = this; t.timeout = settimeout (function ({for (var s = 0; s < t.strings.length ++s) t.sequence[s] = s; t.shuffle && (t.sequence = T.shufflearray (t.s  equence)), T.typewrite (T.strings[t.sequence[t.arraypos]], T.strpos)}, T.startdelay)}, Build:function () {var s = this; if (this.showcursor = =!0 && (this.cursor = t (' <span class= "typed-cursor" > ' + This.cursorchar + "</span > "), This.el.after (This.cursor)), this.stringselement) {s.strings = [], this.stringsElement.hide (); var e = This.stri Ngselement.find ("P");  T.each (E, function (e, i) {S.strings.push (T (i). html ()})} this.init ()}, Typewrite:function (t, s) {if this.stop !0) {var e = Math.Round (Math.random ()) + this.typespeed, i = this; i.timeout = settimeout (function () {var e = 0, R = t.substr (s); if ("^" = = = R.charat (0)) {var o = 1;/^\^\d+/.test (R) && (r =/\d+/.exec (r) [0], o = = r.length, E = parseint (R)), t = t.substring (0, s) + t.substring (S + O)} if ("html" = = I.contenttype) {var n = t.substr (s). charAt (0);if ("<" = = N