鼠标移走,下划线也跟着走的动画过渡效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
        ul{ 
            position: relative;
            display: inline-block;
            border: 1px solid #ddd;
            font-size:0;
            box-sizing:border-box;
            padding: 0px;
        }
        ul li{                
            position: relative;
            float: left;
            display: inline-block;
            height:50px;
            text-align: center;
            line-height: 50px;
            color:#333;
            box-sizing:border-box;
            margin: 0px;
            padding: 0px;
            font-size:16px;
            font-family: "Microsoft YaHei",sans-serif;
        }
        a{
            display: inline-block;
            padding: 0 25px;
            color: #373d41;
            -webkit-transition: color .2s;
            transition: color .2s;
            text-decoration: none;
        }
        a:hover{

        }
/*         ul li:hover{
    border-bottom: 3px solid #00c1de;
} */
        .line{
            position: absolute;
            left: 0px;
            height: 3px;
            width: 0;
            padding: 0;
            background-color: #00c1de;
            bottom: 0;
            -webkit-transition: all .3s cubic-bezier(.4,0,.2,1);
            transition: all .3s cubic-bezier(.4,0,.2,1);
        }
        .line:after{
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
    </style>
    <script>
        $(function(){                   
            $('ul li').hover(function(){
                l=$('ul li').width(); 
                m=$(this).index(); 
                $('.line').css({'width':l,'left':l*m});
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="###">首页</a></li>
        <li><a href="###">页面</a></li>
        <li><a href="###">页面</a></li>
        <li><a href="###">页面</a></li>
        <li><a href="###">页面</a></li>
        <li><a href="###">页面</a></li>
        <li class="line"></li>

    </ul>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 鼠标移走,下划线也跟着走的动画过渡效果

赞 (1)
分享到:更多 ()

发表评论 0