预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下:
实现滚动条效果,其实就是在
标签中让 元素的宽度由0变化到100%,代码很简单,如下所示:CSS样式部分:
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;}
HTML部分:
Hello World!
...
css实现导航栏下划线跟随效果
话不多说先附上代码
day24—JavaSc