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>css设置表格滚动条
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。