html导航图片滚动条,CSS实现导航栏底部动态滚动条效果

这篇博客介绍了如何仅使用CSS3实现导航栏的底部动态滚动条效果,无需JavaScript。内容包括CSS样式的选择和设置,如`ul.nav li:hover span`等,以及HTML结构的示例,展示了纯CSS实现导航栏下划线跟随移动的技术细节。
摘要由CSDN通过智能技术生成

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

ecba229ee76ef6ecb93a03f55d9da2ab.gif

实现滚动条效果,其实就是在

标签中让 元素的宽度由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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值