DDR爱好者之家

css3动画过渡实现鼠标跟随导航效果
站长资源 2024/11/23 佚名
5 1538
DDR爱好者之家 Design By 杰米

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

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>

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米