css3动漫过渡完成电脑鼠标追随导航栏实际效果

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

本篇文章内容关键详细介绍了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:⑵30px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:⑷60px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:⑹90px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:⑼20px 0px; border-top:1px dotted #ccc"></li>
                <li style="background-position:⑴150px 0px;border-left:1px dotted #ccc;"></li>
                <li style="background-position:⑴370px 0px"></li>
                <li style="background-position:⑴600px 0px"></li>
                <li style="background-position:⑴830px 0px"></li>
                <li style="background-position:⑵060px 0px"></li>
                <li style="background-position:⑵290px 0px;border-left:1px dotted #ccc;"></li>
                <li style="background-position:⑵520px 0px"></li>
                <li style="background-position:⑵750px 0px"></li>
                <li style="background-position:⑵980px 0px"></li>
                <li style="background-position:⑶210px 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 = "⑴50px";
                }
                oLi[i].onmouseout = function(){
                    this.style.backgroundPositionY = "0px";
                }
            }
        </script>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。