标签：ati 动态 contain 滚动条 over 技术 one 变化 round
预习了CSS3部分的新知识，想着在不使用JS的情况下实现导航栏滚动条效果，如下：
实现滚动条效果，其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%，代码很简单，如下所示：
CSS样式部分：
<style> ul.nav{background-color: whitesmoke;} ul.nav li{padding: 10px 0;margin: 0 30px;overflow: hidden;} ul.nav li a{text-decoration: none;} ul.nav li span{position: relative;left: -5%;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 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>
标签：ati 动态 contain 滚动条 over 技术 one 变化 round
原文地址：https://www.cnblogs.com/wangwz2019/p/11347692.html
