css3 implements mouse following navigation effect

This article mainly introduces to you the relevant information on CSS3 animation transition to achieve the mouse following navigation effect. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can 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 dotted #ccc;"></li>
                <li style="background-position:-1370px 0px"></li>
                <li style="background-position:-1600px 0px"></li>
                <li style="background-position:-1830px 0px"></li>
                <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"></li>
                <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>

Related recommendations:

Implementation of JavaScript mouse following effect

A simple mouse following prompt effect based on JQuery_jquery

Js mouse follow code small hand click instance method_javascript skills

The above is the detailed content of css3 implements mouse following navigation effect. For more information, please follow other related articles on the PHP Chinese website!