最近我看到一些博客網(wǎng)站有這么一個(gè)效果： 當(dāng)鼠標(biāo)放到博客頭部的標(biāo)題時(shí)，這個(gè)鏈接的下劃線就會(huì)以動(dòng)畫(huà)的方式從無(wú)到有，我覺(jué)得挺有意思的，好像京東的首頁(yè)就有這個(gè)效果，大家可以看看。

　　創(chuàng)建這個(gè)效果非常的簡(jiǎn)單，不需要加入額外的DOM元素到頁(yè)面中，但是低版本的瀏覽器可能不支持CSS動(dòng)畫(huà)(常規(guī)下可能只顯示一條下劃線)

　　首先第一件事就是需要將a標(biāo)簽的text-decoration去掉，設(shè)置position為相對(duì)定位.然后確保這a標(biāo)簽在hover狀態(tài)下顏色一致性.我們這里設(shè)置這個(gè)效果只在h2標(biāo)簽里：

　　下一步，我們加入邊框，通過(guò)一個(gè)動(dòng)畫(huà)來(lái)隱藏他.我們通過(guò)插入一個(gè)偽元素：before來(lái)完成，設(shè)置他的縮放為0，跟著，我們?cè)O(shè)置 visibility： hidden 來(lái)隱藏，因?yàn)橛行g覽器不支持CSS這動(dòng)畫(huà)。

　　在底部，我們告訴這元素，在0.3秒內(nèi)完成all動(dòng)畫(huà)來(lái)改變他，為了動(dòng)畫(huà)呈現(xiàn)，我們現(xiàn)在僅需要使這元素可見(jiàn)在hover狀態(tài)下，且設(shè)置他的X縮放為1：

　　這里的代碼中我們都加了一些前綴，其實(shí)最新版的瀏覽器很多屬性已經(jīng)可以不用加入前綴，為了確保，我們加入了前綴，來(lái)完成我們的代碼。