---恢复内容开始---
这几日学习html,一直在B站乱逛,发现网站的动效做的还是真多。然后翻到了这一页:
上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项(当前页面对应标签保持蓝色),鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成,但是其实这里面的下划线是一个动画效果,仔细观察发现下划线相当于在border-bottom上面做水平运动,切换标签时有一个过渡效果,因此实际上这个下划线其实是一个独立的bar滑块
结构定义如下:
<div class="nav"> <ul> <li class="now" id="cur"><a href="#">综合</a></li> <li><a href="#">视频</a></li> <li><a href="#">番剧</a></li> <li><a href="#">影视</a></li> <li><a href="#">直播</a></li> </ul> <div class="go hover_bar"></div> </div>
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个标签的距离即可。完成的动态效果基本与目标一致