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

 

　　最终实现效果如下：

 

　　HTML5+CSS3做一个灵动的动画TAB切换效果

 

　　为了gif动画能够展示细节，我将动画时间延长到了3秒

 

　　实现思路

 

　　间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。

 

　　只有3个竖线，但是有4个li，这个简单，可以用:not(:first-child)选择器来选择。

 

　　切换的背景颜色变化，因为想要有从小到大的效果，因此，也不能直接使用背景颜色实现，我也准备用伪元素实现。

 

　　如果用伪元素的大小来控制，计算会比较复杂，因此，我想用box-shadow阴影来实现。

 

　　好，大体就是如此了，下面开始写代码，如下：

 

　　HTML代码

 

　　<pclass="m">

 

　　<ulclass="tab">

 

　　<li><ahref="">导航1</a></li>

 

　　<li><ahref="">导航2</a></li>

 

　　<li><ahref="">导航3</a></li>

 

　　<li><ahref="">导航4</a></li>

 

　　</ul>

 

　　</p>

 

　　上面的代码结构是之前已经写好的，我看可以，就不做任何调整了。没有什么累赘的代码。

 

　　CSS代码

 

　　.m{margin:100px;}

 

　　.tab{width:400px;margin:0auto;border:1pxsolid#ddd;height:40px;text-align:center;line-height:40px;background:#fff;border-radius:10px;overflow:hidden;}

 

　　.tabli{float:left;width:100px;position:relative;overflow:hidden;}

 

　　.tabli:before,.tabli:after,.tablia{-webkit-transition:all0.25sease-in-out;transition:all0.25sease-in-out;}

 

　　.tabli:before,.tabli:after{content:"";display:block;}

 

　　.tabli:not(:first-child):after{background:#ddd;height:20px;width:1px;left:0;top:10px;position:absolute;}

 

　　.tablia{display:block;position:relative;z-index:2;color:#000;font-size:14px;}

 

　　.tabli:before{width:0;height:0;top:50%;left:50%;z-index:1;position:absolute;}

 

　　.tabli:hovera{color:#fff;}

 

　　.tabli:hover:before{box-shadow:000100px#36bc99;}

 

　　.tabli:hover+li:after,.tabli:hover:after{height:0;top:20px;}

 

　　代码分析：

 

　　动画实现非常简单，只要使用transition属性即可。

 

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

 

　　其他代码都比较清晰简单，自己分析即可。

 

　　实现这个效果还是非常简单的，重点是平时的积累，以及各种参数的灵活搭配。想到实现方法，最终写代码是很快的事情。而且没有什么知识高点在里面。

 

　　CSS之所以难，不是你不会，而是不不会去搭配。

 

　　其实，还是只还原了99%的设计效果，两条线一个在背景里面，一个在背景外面，想要把两条分割线都放到背景里面来，应该如何实现呢？可以思考一下。

 

　　安利一下scss。上面的css是编译出来的。其实用scss实现非常方便快捷，代码可读性也更高。

 

　　演示如下：

 

　　

 

　　

 

　　.m{

 

　　margin:100px;

 

　　}

 

　　.tab{

 

　　width:400px;margin:0auto;border:1pxsolid$cdd;height:40px;text-align:center;line-height:40px;

 

　　background:$cff;border-radius:10px;overflow:hidden;

 

　　li{

 

　　float:left;width:100px;position:relative;overflow:hidden;

 

　　&:before,&:after,a{@includedz();}

 

　　&:before,&:after{

 

　　content:"";display:block;

 

　　}

 

　　&:not(:first-child){

 

　　&:after{

 

　　background:$cdd;height:20px;width:1px;left:0;top:10px;position:absolute;

 

　　}

 

　　}

 

　　a{

 

　　display:block;position:relative;z-index:2;color:$c00;font-size:14px;

 

　　}

 

　　&:before{

 

　　width:0;height:0;top:50%;left:50%;z-index:1;position:absolute;

 

　　}

 

　　&:hover{

 

　　a{color:$cff;}

 

　　&:before{

 

　　box-shadow:000100px$cyan;

 

　　}

 

　　&+li:after,&:after{

 

　　height:0;top:20px;

 

　　}

 

　　}

 

　　}

 

　　}

 

　　当然，这段代码中我用了颜色变量以及mixin混入代码。你不能直接使用。








本文转载自中文网