仿阿里云首页导航下划线效果

用到了CSS3的 [transition] 动画效果

demo只是高仿的效果,阿里前端写出来的效果貌似比我写出来的感觉好点[心塞]...

 

    /* --------------------------- html -------------------------------- */
    <nav class="navigation" role="navigation">
        <ul class="primary-nav">
            <li><a href="index.html" class="page-scroll">首页</a></li>
            <li><a href="#PlantForm" class="page-scroll">平台介绍</a></li>
            <li><a href="#PowerFul" class="page-scroll">服务内容</a></li> 
            <li><a href="#Safety" class="page-scroll">服务模式</a></li>
            <li><a href="#Customer" class="page-scroll">合作伙伴</a></li>
            <li><a href="#Future" class="page-scroll">服务申请</a></li>
            <li><a href="#AboutUs" class="page-scroll">关于我们</a></li>
            <div class="line"></div>  //下划线
        </ul>
    </nav>

    /* --------------------------- css -------------------------------- */
    ul, ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .navigation li {
        cursor: pointer;
        display: inline-block;
    }
    .navigation a {
        color: #fff;
        font-size: 14px;
        padding: 0 20px;
        text-decoration:none;
        text-transform:uppercase;
    }
    //下划线部分
    .navigation div.line{
        position:absolute;
        width:0;
        height:2px;
        left:0;
        bottom:0;
        background:#fff;
        -webkit-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
        -moz-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* --------------------------- js -------------------------------- */
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        function UnderLine(){
            var $navli = $(".primary-nav li");
            $navli.mouseover(function(){
                var $this = $(this);
                var $line = $(".primary-nav .line");
                $line.css({
                    width: $this.outerWidth()-12, //下划线的长度可根据padding值调整
                    left: $this.position().left + 6
                })
            }).mouseout(function() {
                var $this = $(this);
                var $line = $(".primary-nav .line");
                $line.css({
                    width: 0,
                    left: $this.position().left + 6 
                })
            })
        }UnderLine();
    </script>