css如果实现导航栏切换,下划线毛毛虫切换效果？

Question

在网上找了一个类似的效果：https://www.cnblogs.com/coco1...，切换效果和毛毛虫切换效果（从tab1切换到tab2,tab1的下划线宽度逐渐变短，tab2的下划线的宽度逐渐边长）还是有出入的，暂时没有思路。

Answer 1

毛毛虫效果有个最大的特点就是丝滑般的流畅，也就是始终是“一条毛毛虫”在标签下跑。这片文章我之前也看过，但是确实不丝滑。后来我想到个办法，但是感觉太非主流了...并且完整的效果只好用sass或者less来写。
比如：现在有5个标签，每个li标签的长度我都是精确控制的。那么我只需要给第一个标签下设置个伪元素after，当作“毛毛虫”。当我鼠标移到第二个标签时，我就用transform移动after的位置，使其刚好到第二个标签下方。这个方法还是很麻烦的，有可能会考虑到定位的问题。同时好像也不能控制来回方向，必须每个标签hover的时候都去进行判断...