CSS实现导航栏底部动态滚动条效果

纯CSS实现的导航栏底部滚动条效果,如下:

实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%,代码很简单,如下所示:

CSS样式部分:

<style>
    ul.nav {background-color: whitesmoke;}
    ul.nav li {padding: 10px 0;margin: 0 30px;overflow: hidden;display: inline-block;}
    ul.nav li a {text-decoration: none;}
    ul.nav li span {position: relative;left: -10%;float: left;width: 5%;transition: border, width .5s;border: 1px solid #5FB878;}
    ul.nav li:hover span {width: 105%;border: 1px solid #5FB878;}
</style>

HTML部分:

<div>
    <ul class="nav">
        <li><a href="">导航一</a><span></span></li>
        <li><a href="">导航二</a><span></span></li>
        <li><a href="">导航三</a><span></span></li>
        <li><a href="">导航四</a><span></span></li>
    </ul>
</div>

 

posted @ 2019-08-13 18:21  王文竹  阅读(2520)  评论(0编辑  收藏  举报