HTML5+CSS3做⼀个灵动的动画TAB切换效果
HTML5+CSS3 做⼀个灵动的动画 TAB 切换效果
设计师给了⼀个 tab 切换的效果图。虽然是⼀个很⼩的功能，但是前端⼯程师在实现的时候还是有很多细节需要注意。我写了⼀个 demo 给⼤家参考。
最终实现效果如下：
为了 gif 动画能够展⽰细节，我将动画时间延长到了 3 秒
代码分享地址：
上⾯的分享地址502了，不知道runjs这个⽹站怎么回事⼉，根据⽹友的反馈，新增了⼀个分享地址： ，⼤家可以⾃⾏查看。分享地址实在有问题，可以⾃⼰把代码复制过去跑起来哦～
实现思路
1. 间隔竖线，因为不是顶天⽴地的，所以不能⽤边框。我准备⽤伪元素实现。
2. 只有 3 个竖线，但是有 4 个 li ，这个简单，可以⽤ :not(:first-child) 选择器来选择。
3. 切换的背景颜⾊变化，因为想要有从⼩到⼤的效果，因此，也不能直接使⽤背景颜⾊实现，我也准备⽤伪元素实现。
4. 如果⽤伪元素的⼤⼩来控制，计算会⽐较复杂，因此，我想⽤ box-shadow 阴影来实现。
好，⼤体就是如此了，下⾯开始写代码，如下：
HTML 代码
<div class="m">
<ul class="tab">
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
</ul>
</div>
上⾯的代码结构是之前已经写好的，我看可以，就不做任何调整了。没有什么累赘的代码。
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;overflo w: 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;}js控制css3动画触发
.tab li:hover + li:after, .tab li:hover:after{height: 0;top: 20px;}
代码分析：
1. 动画实现⾮常简单，只要使⽤ transition 属性即可。
2. 控制⾃⼰的伪元素和下⼀个同级元素的伪元素，只需要使⽤ + 选择器即可。
其他代码都⽐较清晰简单，⾃⼰分析即可。
实现这个效果还是⾮常简单的，重点是平时的积累，以及各种参数的灵活搭配。想到实现⽅法，最终写代码是很快的事情。⽽且没有什么知识⾼点在⾥⾯。
CSS 之所以难，不是你不会，⽽是不不会去搭配。
其实，还是只还原了99%的设计效果，两条线⼀个在背景⾥⾯，⼀个在背景外⾯，想要把两条分割线都放到背景⾥⾯来，应该如何实现呢？可以思考⼀下。
安利⼀下 scss 。上⾯的 css 是编译出来的。其实⽤ scss 实现⾮常⽅便快捷，代码可读性也更⾼。
演⽰如下：
.m{
margin: 100px;
}
.tab{
width: 400px;margin: 0 auto;border: 1px solid $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{@include dz();}
&: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: 0 0 0 100px $cyan;
}
& + li:after,&:after{
height: 0;top: 20px;
}
}
}
}
当然，这段代码中我⽤了颜⾊变量以及 mixin 混⼊代码。你不能直接使⽤。
更多有关 scss 的内容，可以查看这个⽹站
如果⽂章由于我学识浅薄，导致您发现有严重谬误的地⽅，请⼀定在评论中指出，我会在第⼀时间修正我的博⽂，以避免误⼈⼦弟。本⽂由 FungLeo 原创，允许转载，但转载必须保留⾸发链接。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。