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

Posted 2022-07-05 wangwz2019

预习了CSS3部分的新知识，想着在不使用JS的情况下实现导航栏滚动条效果，如下：

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

CSS样式部分：

<style>
        ul.navbackground-color: whitesmoke;
        ul.nav lipadding: 10px 0;margin: 0 30px;overflow: hidden;
        ul.nav li atext-decoration: none;
        ul.nav li spanposition: relative;left: -5%;float: left;width: 5%;transition: border,width .5s;border:1px solid #5FB878;
        ul.nav li:hover spanwidth: 105%;border:1px solid #5FB878;

</style>

html部分：

<div class="container">
    <h2>Hello World!</h2>
    <div>
        <ul class="nav">
            <li><a href="">导航一</a><span></span></li>
　　　　　　　<li><a href="">导航二</a><span></span></li>　　
　　　　　　　　...
        </ul>
    </div>
</div>