css3动画过渡实现鼠标跟随导航效果

2024-07-11 08:42:13

字体：大中小

来源：转载

供稿：网友

本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果，分享给大家，具体如下：

鼠标跟随导航效果

效果知识点：html/css布局思维, div+css讲解，css3动画，盒子模型, 浮动与定位，鼠标事件。

html代码：

<div 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>            <div class="box"></div>

css代码：

        <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代码：

    <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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：CSS 动画实现动态气泡背景的方法

下一篇：CSS :befor :after 伪元素的巧妙用法