起因：
閑來(lái)無(wú)事梁棠，看到簡(jiǎn)述我的 “我的主頁(yè)” 導(dǎo)航欄上很經(jīng)典的鼠標(biāo)以上很經(jīng)典的動(dòng)畫(huà)世舰。
記得之前業(yè)務(wù)上也有要類似動(dòng)畫(huà)的時(shí)候庞瘸，但那是用的是jQuery，就直接找了個(gè)jQuery的插件许赃。
得閑剛好看到簡(jiǎn)書(shū)這動(dòng)畫(huà)止喷，便 f12 看了下代碼結(jié)構(gòu)。
最終實(shí)現(xiàn)效果：
具體實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.trigger-menu {
border-bottom: 1px solid #f0f0f0;
font-size: 0; /*消除li inline-block 為行內(nèi)元素后的默認(rèn)間距*/
list-style: none;
}
.trigger-menu li {
position: relative; /*關(guān)鍵點(diǎn)： 為每個(gè)li設(shè)置絕對(duì)定位*/
display: inline-block; /*使li為塊級(jí)元素混聊，可以橫向排列*/
padding: 8px 0;
border-bottom: 2px solid transparent
}
.trigger-menu li:after { /*hover狀態(tài)下時(shí)的底部橫線*/
content: "";
position: absolute; /*關(guān)鍵點(diǎn)： 該元素行對(duì)定位于 li*/
left: 50%;
bottom: -2px;
width: 100%;
opacity: 0;
border-bottom: 2px solid #646464;
transform: translate(-50%) scaleX(0);
transition: .2s ease-in-out;
}
.trigger-menu li:hover::after {
opacity: 1;
transform: translate(-50%) scaleX(1);
}
.trigger-menu a {
padding: 13px 20px;
font-size: 15px;
font-weight: 700;
color: #969696;
line-height: 25px;
text-decoration: none;
}
.trigger-menu a:hover {
color: #646464
}
/*點(diǎn)擊后添加 .active 樣式*/
.trigger-menu li.active{
color: #646464;
border-bottom: 2px solid #646464
}
.trigger-menu li.active a{
color: #646464;
}
</style>
</head>
<body>
<ul class="trigger-menu">
<li><a href="">文章</a></li>
<li><a href="">動(dòng)態(tài)</a></li>
<li><a href="">最新評(píng)論</a></li>
<li class="active"><a href="">熱門(mén)</a></li>
</ul>
</body>
</html>
解析：
關(guān)鍵點(diǎn)
利用元素的after偽類創(chuàng)建底部橫線启盛。橫線怎么剛好定在元素的底部呢？
利用元素間的相對(duì)定位來(lái)使橫線定位到li底部。 li 設(shè)置為絕對(duì)定位 relative僵闯，然后把 after 設(shè)置 absolute 相對(duì)于li來(lái)定位卧抗。
bottom: -2px？要使橫線剛好在ul底部邊框上鳖粟，因?yàn)闄M線高度為2px社裆，所以橫線定在底部然后上移兩個(gè)像素。
而 left: 50%;transform: translate(-50%); 是讓元素位于父級(jí)居中向图。
3.動(dòng)畫(huà)是怎么實(shí)現(xiàn)的泳秀？
如果一開(kāi)始就讓橫線展示出來(lái)要怎么寫(xiě)？
.trigger-menu li:after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 100%;
border-bottom: 2px solid #646464;
transform: translate(-50%) scaleX(1); /*原本為scaleX(0)*/
}
這樣一開(kāi)始橫線就是出現(xiàn)的榄攀。而實(shí)例中我們hover時(shí)讓橫線出現(xiàn)的做法是 設(shè)置透明度可見(jiàn)和不縮放嗜傅，如下
.trigger-menu li:hover::after {
transform: translate(-50%) scaleX(1);
}
即一開(kāi)始橫線隱藏了，是因?yàn)?scaleX(0)檩赢， 把a(bǔ)fter縮寫(xiě)到0吕嘀，即視覺(jué)上看不見(jiàn)(實(shí)際上還是占這那塊位置)。而hover時(shí)贞瞒，把 scaleX(1)設(shè)為不縮放偶房，即能看到完整的橫線。
那么是怎么做到橫線由中間向兩邊延展军浆？就是讓橫線位于父級(jí)居中 “l(fā)eft: 50%; transform: translate(-50%)”
這樣就完成了我們所看到的動(dòng)效了棕洋。
