南順網絡
HTML5+CSS3 實現靈動的(de)動畫 TAB 切換效果(DEMO)
設計師給了一(yī)個 tab 切換的(de)效果圖。雖然是一(yī)個很小的(de)功能，但是前端工程師在實現的(de)時候還是有很多細節需要注意。我寫了一(yī)個 demo 給大家參考。
最終實現效果如(rú)下：
實現思路
間隔豎線，因為(wèi)不是頂天立地(dì)的(de)，所以不能用邊框。我準備用僞元素實現。
隻有 3 個豎線，但是有 4 個 li ，這個簡單，可(kě)以用 :not(:first-child) 選擇器來選擇。
切換的(de)背景顔色變化，因為(wèi)想要有從小到大的(de)效果，因此，也不能直接使用背景顔色實現，我也準備用僞元素實現。
如(rú)果用僞元素的(de)大小來控制，計算會比較複雜，因此，我想用 box-shadow 陰影來實現。
好，大體就是如(rú)此了，下面開始寫代碼，如(rú)下：
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>上面的(de)代碼結構是之前已經寫好的(de)，我看可(kě)以，就不做(zuò)任何調整了。沒有什麽累贅的(de)代碼。
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 屬性即可(kě)。
控制自(zì)己的(de)僞元素和(hé)下一(yī)個同級元素的(de)僞元素，隻需要使用 + 選擇器即可(kě)。
其他代碼都比較清晰簡單，自(zì)己分析即可(kě)。
實現這個效果還是非常簡單的(de)，重點是平時的(de)積累，以及各種參數的(de)靈活搭配。想到實現方法，最終寫代碼是很快的(de)事情。而且沒有什麽知識高(gāo)點在裏面。
CSS 之所以難，不是你不會，而是不不會去(qù)搭配。
其實，還是隻還原了99%的(de)設計效果，兩條線一(yī)個在背景裏面，一(yī)個在背景外面，想要把兩條分割線都放到背景裏面來，應該如(rú)何實現呢(ne)？可(kě)以思考一(yī)下。
編輯:--ns868
