设计方案师给了1个 tab 切换的实际效果图。尽管是1个很小的作用，可是前端开发工程项目师在完成的情况下還是有许多细节必须留意。我写了1个 demo 给大伙儿参照。
最后完成实际效果以下：
以便 gif 动漫可以展现细节，我将动漫時间增加到了 3 秒
编码共享详细地址：http://runjs.cn/detail/h2dqt3td
完成思路
间距竖线，由于并不是顶天立地的，因此不可以用边框。我提前准备用伪元素完成。
仅有 3 个竖线，可是有 4 个 li ，这个简易，能够用 :not(:first-child) 挑选器来挑选。
切换的情况色调转变，由于要想有从小到大的实际效果，因而，也不可以立即应用情况色调完成，我也提前准备用伪元素完成。
假如用伪元素的尺寸来操纵，测算会较为繁杂，因而，我想用 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; 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 特性便可。
操纵自身的伪元素和下1个同级元素的伪元素，只必须应用 + 挑选器便可。
别的编码都较为清楚简易，自身剖析便可。
完成这个实际效果還是十分简易的，关键是平常的累积，和各种各样主要参数的灵便配搭。想起完成方式，最后写编码是很快的事儿。并且沒有甚么专业知识高点在里边。
CSS 之因此难，并不是你不容易，而是不不容易去配搭。
实际上，還是只复原了99%的设计方案实际效果，两条线1个在情况里边，1个在情况外面，要想把两条切分线都放到情况里边来，应当怎样完成呢？能够思索1下。
安利1下 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 混入编码。你不可以立即应用。
总结
以上所述是网编给大伙儿详细介绍的HTML5+CSS3 完成灵动的动漫 TAB 切换实际效果，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 在线网页制作_建网页_个人简介网页制作_简单网页_建立网页 版权所有 （网站地图） 粤ICP备10235580号