设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。
最终实现效果如下:
为了 gif 动画能够展示细节,我将动画时间延长到了 3 秒
代码分享地址:http://runjs.cn/detail/h2dqt3td
实现思路
间隔竖线,因为不是顶天立地的,所以不能用边框。我准备用伪元素实现。
只有 3 个竖线,但是有 4 个 li ,这个简单,可以用 :not(:first-child) 选择器来选择。
切换的背景颜色变化,因为想要有从小到大的效果,因此,也不能直接使用背景颜色实现,我也准备用伪元素实现。
如果用伪元素的大小来控制,计算会比较复杂,因此,我想用 box-shadow 阴影来实现。
好,大体就是如此了,下面开始写代码,如下:
HTML 代码
上面的代码结构是之前已经写好的,我看可以,就不做任何调整了。没有什么累赘的代码。
CSS 代码
.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }
代码分析:
动画实现非常简单,只要使用 transition 属性即可。
控制自己的伪元素和下一个同级元素的伪元素,只需要使用 + 选择器即可。