一个HTML 导航栏下划线跟随效果
这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页：
点此查看
上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块
结构定义如下：
复制代码
复制代码
nav的position设为相对位移，div如下：
复制代码
.go {
width: 32px;
height: 3px;
background-color: #00a1d6;
position: absolute;
left: 0;
bottom: 0;
transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;
}
复制代码
假定每个标签的宽度间距固定，那么只要在js中监听鼠标事件，让bar移动n个标签的距离即可.js代码如下
复制代码
复制代码
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
