CSS3 to achieve mouse-following navigation effect

This article mainly and everybody introduced the CSS3 animation transition realizes the mouse to follow the navigation effect related data, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

Effect Knowledge Points: html/css layout thinking, p+css explanation, CSS3 Animation, box model, floating and positioning, mouse events.

HTML code:

<p class= "wrap" > <ul> <li style= "background-position:0px 0px; border-top:1px dotted #ccc; border-left:1px dotted #ccc; " ></li> <li style= "background-position:-230px 0px; border-top:1px dotted #ccc "></li> <li style=" background-position:-460px 0px; border-top:1px dotted #ccc "></li> <li style=" background-position:-690px 0px; border-top:1px dotted #ccc "></li> <li style=" background-position:-920px 0px; border-top:1px dotted #ccc "></li> <li style=" background-position:-1150px 0px;border-left:1px do tted #ccc; " ></li> <li style= "background-position:-1370px 0px" ></li> <li style= " background-position:-1600px 0px "></li> <li style=" background-position:-1830px 0px "&GT;&LT;/LI&G                T <li style= "background-position:-2060px 0px" ></li> <li style= "background-position:-2290px 0px;border-left:1px dotted #ccc;" ></li> <li style= "background-position:-2520px 0px" ></li> <li style= " background-position:-2750px 0px "></li> <li style=" background-position:-2980px 0px "&GT;&LT;/LI&G                T <li style= "background-position:-3210px 0px" ></li> </ul> <p class= "box" ></ P>

CSS code:

        <style> *{margin:0px;            padding:0px;            } html{height:100%;                } body{width:100%;                height:100%;                Background:url ("images/wallpaper4.jpg");                background-size:100% 100%;            Overflow:hidden;                }. wrap{position:relative;                width:1156px;                height:450px;            margin:50px Auto;                }. Wrap ul li{position:relative;                Z-index:10;                width:230px;                height:150px;                Float:left;                List-style:none;                border-right:1px dotted #ccc;                border-bottom:1px dotted #ccc;                Background:url ("Images/clients.png") no-repeat;                -webkit-transition:1s;                -moz-transition:1s;     -ms-transition:1s;           -o-transition:1s;            Transition:1s;                }. box{Position:absolute;                left:0px;                top:0px;                Z-index:2;                width:230px;                height:150px;                Background:rgba (0,0,0,.2);                -webkit-transition:1s;                -moz-transition:1s;                -ms-transition:1s;                -o-transition:1s;            Transition:1s; } </style>

JavaScript code:

    <script>            var oLi = document.getelementsbytagname ("li");            var box = document.getelementsbyclassname ("box") [0];            for (var i = 0;i<oli.length; i++)            {                oli[i].onmousemove = function () {                    var _left = this.offsetleft;                    var _top = this.offsettop;                    Box.style.left = _left + "px";                    Box.style.top = _top + "px";                    This.style.backgroundPositionY = " -150px";                }                Oli[i].onmouseout = function () {                    This.style.backgroundPositionY = "0px";                }            }        </script>