BottomSlideLine底部滑动线交互效果

底部滑动线的交互效果，用得好是真的能给整个页面加分不少。这个资源就挺实用的，结构清爽、逻辑简单，适合各种场景嵌套用。

底部滑动条的定位做得比较到位，CSS 动画用得还蛮顺滑的，transition控制得比较柔，响应速度也不错。用position: absolute搭配transform去滑动的方式，性能上也挺稳。

整体思路有点像移动端菜单切换，但用在tab切换、导航菜单、甚至商品分类这些地方也合适。想要自定义颜色和高度的话，改 CSS 就行，灵活，不会绕弯。

代码方面没什么复杂逻辑，addEventListener绑定事件，滑动的时候通过动态计算宽度和位置来设置滑块样式，像这样：

slideLine.style.width = target.offsetWidth + 'px';
slideLine.style.left = target.offsetLeft + 'px';

如果你有多个导航条，可以封装成一个方法，甚至写个小插件也 OK。用了之后页面质感会提高不少，体验也更完整。

另外，你要是感兴趣，还可以看看这些相关资源：

• Qua_Zip.zip，交互层次感不错
• ha_Zip.zip，比较适合移动端
• zip 伪加密.zip，安全演示用还行

如果你经常做多标签导航，或者想让页面有点“动感”，这个资源可以收下。