设计师给出了tab切换的效果图。虽然是小功能，但是前端工程师在实现的时候还是需要注意很多细节。我写了一个演示给你参考。

最终效果如下：

Html5cs3制作智能动画TAB切换效果

为了让gif动画显示细节，我把动画时间延长到了3秒

实现理念

竖线间隔，因为不是顶天立地，不能用边框。我将用伪元素来实现它。

只有三条垂直线，但有四个li，这很简单，可以用：not(:first-child)选择器选择。

开关的背景色是变化的，因为要有从小到大的效果，所以不能直接用背景色来实现，我准备用伪元素来实现。

如果用虚拟元素的大小来控制，计算会比较复杂，所以想用盒影阴影来实现。

好了，就这样。让我们开始编写如下代码：

HTML代码

pclass='m '

ulclass='tab '

Liahref=" "导航1/a/li

Liahref=" "导航2/a/li

Liahref=" "导航3/a/li

Liahref=" "导航4/a/li

/ul

/p

上面的代码结构是之前写的，我觉得还可以，就不做任何调整了。没有繁琐的代码。

CSS代码。m { margin:100px}。tab { width:400pxmargin:0autoborder:1pxsolid # dddheight:40pxtext-align : center；行高：40 px；背景# fffborder-radius :10 px；飞越：隐藏；}。tabli { float:left宽度width:100px位置：相对；飞越：隐藏；}

. tabli:before .tabli:after，tablia {- web kit-transit : all 0.25 sease-in-out；transition : all 0.25 sease-in-out；}

. tabli:before、 tabli : after { content : }；display:block}

. tabli : not(: first-child): after { background : # DDD；height:20pxwidth:1pxleft:0top:10pxposition:absolute值；}。tablia { display:block位置：相对；z-索引：2；color: # 000font-size :14 px；}

. tabli:before { width:0height:0top :50%；左侧：50%；z-索引：1；position:absolute值；}

. tabli :气垫{ color: # fff}

. tabli :悬停： before { box-shadow :000100 px # 36 BC 99；}

. tabli:hover li:after .tabli : hover : after { height 3:0；top:20px}

代码分析：

动画实现很简单，只需使用transition属性。

要控制自己的伪元素和下一个同级元素的伪元素，只需使用选择器。

其他代码清晰简单，可以自己分析。

达到这个效果很简单，重点是平时的积累和各种参数的灵活搭配。想到实现方法，最后写代码就快了。而且里面没有什么知识点。

CSS难不是因为你配不上，而是因为你配不上。

事实上，只有99%的设计效果得到了恢复。有两行，一行在背景里面，一行在背景外面。如果要把两条分割线都放在后台，应该怎么实现？你可以考虑一下。

安利看SCS。上面的css是编译的。其实用scss实现起来非常方便快捷，代码可读性也比较高。

演示如下：m{

margin:100px

}。tab{

宽度width:400pxmargin:0autoborder:1pxsolid $ cddheight:40pxtext-align : center；行高：40 px；

背景：美元cffborder-radius :10 px；飞越：隐藏；

li{

float:left宽度width:100px位置：相对；飞越：隐藏；

:before，after，a { @ includez()；}

:之前，之后{

content :“”；display:block

}

: no(:个孩子){

:after{

背景：加元；height:20pxwidth:1pxleft:0top:10pxposition:absolute值；

}

}

a{

display:block位置：相对；z-索引：2；color: $ c00font-size :14 px；

}

:before{

宽度：0；height:0top :50%；左侧：50%；z-索引：1；position:absolute值；

}

:hover{

a { color: $ cff}

:before{

box-shadow :0000100 px $青色；

}

li:after，after{

height:0top:20px

}

}

}

}

当然，在这段代码中，我在代码中使用了颜色变量和mixin。不能直接用。

本文转载自中文网站