HTML5+CSS3 實(shí)現(xiàn)靈動(dòng)的動(dòng)畫 TAB 切換效果(DEMO)
我要評(píng)論設(shè)計(jì)師給了一個(gè) tab 切換的效果圖。雖然是一個(gè)很小的功能，但是前端工程師在實(shí)現(xiàn)的時(shí)候還是有很多細(xì)節(jié)需要注意。我寫了一個(gè) demo 給大家參考。
最終實(shí)現(xiàn)效果如下：
為了 gif 動(dòng)畫能夠展示細(xì)節(jié)，我將動(dòng)畫時(shí)間延長(zhǎng)到了 3 秒
代碼分享地址：http://runjs.cn/detail/h2dqt3td
實(shí)現(xiàn)思路
間隔豎線，因?yàn)椴皇琼斕炝⒌氐模圆荒苡眠吙?。我?zhǔn)備用偽元素實(shí)現(xiàn)。
只有 3 個(gè)豎線，但是有 4 個(gè) li ，這個(gè)簡(jiǎn)單，可以用 :not(:first-child) 選擇器來選擇。
切換的背景顏色變化，因?yàn)橄胍袕男〉酱蟮男Ч?，因此，也不能直接使用背景顏色?shí)現(xiàn)，我也準(zhǔn)備用偽元素實(shí)現(xiàn)。
如果用偽元素的大小來控制，計(jì)算會(huì)比較復(fù)雜，因此，我想用 box-shadow 陰影來實(shí)現(xiàn)。
好，大體就是如此了，下面開始寫代碼，如下：
HTML 代碼
<div class="m">
<ul class="tab">
<li><a href="">導(dǎo)航1</a></li>
<li><a href="">導(dǎo)航2</a></li>
<li><a href="">導(dǎo)航3</a></li>
<li><a href="">導(dǎo)航4</a></li>
</ul>
</div>
上面的代碼結(jié)構(gòu)是之前已經(jīng)寫好的，我看可以，就不做任何調(diào)整了。沒有什么累贅的代碼。
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; }
代碼分析：
動(dòng)畫實(shí)現(xiàn)非常簡(jiǎn)單，只要使用 transition 屬性即可。
控制自己的偽元素和下一個(gè)同級(jí)元素的偽元素，只需要使用 + 選擇器即可。
其他代碼都比較清晰簡(jiǎn)單，自己分析即可。
實(shí)現(xiàn)這個(gè)效果還是非常簡(jiǎn)單的，重點(diǎn)是平時(shí)的積累，以及各種參數(shù)的靈活搭配。想到實(shí)現(xiàn)方法，最終寫代碼是很快的事情。而且沒有什么知識(shí)高點(diǎn)在里面。
CSS 之所以難，不是你不會(huì)，而是不不會(huì)去搭配。
其實(shí)，還是只還原了99%的設(shè)計(jì)效果，兩條線一個(gè)在背景里面，一個(gè)在背景外面，想要把兩條分割線都放到背景里面來，應(yīng)該如何實(shí)現(xiàn)呢？可以思考一下。
安利一下 scss 。上面的 css 是編譯出來的。其實(shí)用 scss 實(shí)現(xiàn)非常方便快捷，代碼可讀性也更高。
演示如下：
.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;
}
}
}
}
當(dāng)然，這段代碼中我用了顏色變量以及 mixin 混入代碼。你不能直接使用。
總結(jié)
以上所述是小編給大家介紹的HTML5+CSS3 實(shí)現(xiàn)靈動(dòng)的動(dòng)畫 TAB 切換效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了html 實(shí)現(xiàn)tab切換的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-06-30