1、前幾天看到hexo的next主題標題hover效果很炫，自己嘗試寫了乙個，另乙個是next的實現，照例先上圖
2、實現小黑科技
j**ascript:void(0);" class="demo1">自己實現的hover效果
/* css樣式 */
.demo1
.demo1:before程式設計客棧
.demo1:hover:before
關鍵在於沒有hover的時候定義width為0，這樣可以實現寬度從0到100%的變化。
left為50%，目的是為了動畫開始的位置是在50%的位置。
3、hexo next主題的官方實現
j**ascript:void(0);" class="demo2">hexo next主題的實現
/* css樣式 */
.demo2
.demo2:before
.demo2:hover:before
這個實現的關鍵就是scale(0)到scale(1)的變化。
css3的scale transform的原點是中點，所以會從中間的位置開始動畫。
4、兩者區別
通過動畫也看出來，next的動畫有透明漸變的效果，和scale的表現形式有關。
第乙個實現只是width變化，但是也可以用animation實現和next一樣的效果。
本文標題: css3製作hover下劃線動畫
本文位址:
CSS3繪製有活力的鏈結下劃線
鏈結下劃線是非常常見的一種樣式，最近做了乙個非常簡單的視覺效果，非常不錯，完整 檢視。xml html code複製內容到剪貼簿 程式設計客棧 建立這種效果是非常簡單的，不需要新增額外的dom元素到html，不過需要考慮一下瀏覽器的相容性問題，在老舊版本的瀏覽器中它只會顯示為乙個普通的下劃線。好了，...
使用css實現動態下劃線效果
而且下劃線是與超連結同色的 大家可以自行測試 這個效果我們可以很方便的使用css偽元素來實現。主要是用到了transform 中的scale來縮放偽元素，達到拉長偽元素 下劃線 的結果。同時使用transform origin來控制縮放方向，下面的原始碼複製即可使用 dom href class s...
全網頁CSS 超連結無下劃線
在乙個網頁中有若干對文字a超連結錨文字，但預設情況下帶鏈結文字是有下劃線效果的。如何使用css實現超連結無下劃線樣式呢？通過css設定要想讓帶超連結錨文字字型文字預設下劃線消失，我們需要css樣式單詞text decoration去掉下劃線。具體去掉全網頁預設鏈結下劃線實現無下劃線css 如下 a ...