CSS動畫：有活力的連接下劃線

連接下劃線是很是常見的一種樣式，最近作了一個很是簡單的視覺效果，很是不錯，能夠點下面連接查看。

http://jsbin.com/zanewe/edit?html,css,output

建立這種效果是很是簡單的，不須要添加額外的DOM元素到HTML，不過須要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示爲一個普通的下劃線。

好了，如今正式開始。咱們須要作的第一件事就是去除text-decoration，並設置連接爲相對定位。咱們須要確保連接在hover時不會改變顏色，這裏咱們拿h2舉例：

h2 > a {
      position: relative;
      color: #000;
      text-decoration: none;
}

h2 > a:hover {
      color: #000;
}

接下來，咱們要添加border，經過變換隱藏它。插入一個:before而且設置它scaleX（0），保守起見，若是瀏覽器不支持，咱們經過visibility: hidden隱藏它。

h2 > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
}

最後設置動畫時間爲0.3s，如今咱們只須要設置元素在hover時顯示而且scaleX(1)：

h2 > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

大功告成！??????

這樣就完成了一個頗有活力的下劃線動畫