本文给大家分享一个demo基于HTML5+CSS3 实现灵动的动画 TAB 切换效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧

设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。 最终实现效果如下： 为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒 代码分享地址：http://runjs.cn/detail/h2dqt3td 实现思路 间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。 只有 3 个竖线，但是有 4 个 li ，这个简单，可以用 :not(:first-child) 选择器来选择。