實現思路
間隔豎線，因為不是頂天立地的，所以不能用邊框。我準備用偽元素實現。
只有 3 個豎線，但是有 4 個 li ，這個簡單，可以用 :not(:first-child) 選擇器來選擇。
切換的背景顏色變化，因為想要有從小到大的效果，因此，也不能直接使用背景顏色實現，我也準備用偽元素實現。
如果用偽元素的大小來控制，計算會比較復雜，因此，我想用 box- 陰影來實現。
好，大體就是如此了，下面開始寫代碼css制作音樂播放界面效果圖，如下：
HTML 代碼
上面的代碼結構是之前已經寫好的css制作音樂播放界面效果圖，我看可以，就不做任何調整了。沒有什么累贅的代碼。
CSS 代碼
.m { : 100px; }
.tab { width: 400px; : 0 auto; : 1px solid #ddd; : 40px; text-align: ; line-: 40px; : #fff; -: 10px; : ; }
.tab li { float: left; width: 100px; : ; : ; }
.tab li:, .tab li:after, .tab li a { --: all 0.25s ease-in-out; : all 0.25s ease-in-out; }
.tab li:, .tab li:after { : ""; : block; }
.tab li:not(:first-child):after { : #ddd; : 20px; width: 1px; left: 0; top: 10px; : ; }
.tab li a { : block; : ; z-index: 2; color: #000; font-size: 14px; }
.tab li: { width: 0; : 0; top: 50%; left: 50%; z-index: 1; : ; }
.tab li:hover a { color: #fff; }
.tab li:hover: { box-: 0 0 0 100px #; }
.tab li:hover + li:after, .tab li:hover:after { : 0; top: 20px; }
代碼分析：
動畫實現非常簡單，只要使用 屬性即可。
控制自己的偽元素和下一個同級元素的偽元素，只需要使用 + 選擇器即可。