成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

stackfing / 915人閱讀

摘要：鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，可以點下面鏈接查看。最后設(shè)置動畫時間為，現(xiàn)在我們只需要設(shè)置元素在時顯示并且大功告成這樣就完成了一個很有活力的下劃線動畫

鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，可以點下面鏈接查看。

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

創(chuàng)建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的下劃線。

好了，現(xiàn)在正式開始。我們需要做的第一件事就是去除text-decoration，并設(shè)置鏈接為相對定位。我們需要確保鏈接在hover時不會改變顏色，這里我們拿h2舉例：

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

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

接下來，我們要添加border，通過變換隱藏它。插入一個:before并且設(shè)置它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;
}

最后設(shè)置動畫時間為0.3s，現(xiàn)在我們只需要設(shè)置元素在hover時顯示并且scaleX(1)：

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

大功告成！??????

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54349.html

相關(guān)文章

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

    摘要：鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，可以點下面鏈接查看。最后設(shè)置動畫時間為，現(xiàn)在我們只需要設(shè)置元素在時顯示并且大功告成這樣就完成了一個很有活力的下劃線動畫 鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，可以點下面鏈接查看。 http://jsbin.com/zanewe/edit?html,css,output 創(chuàng)建這種...

    lifesimple 評論0 收藏0

  • angular - 收藏集 - 掘金

    摘要：如何在中使用動畫前端掘金本文講一下中動畫應(yīng)用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創(chuàng)建功能強大，動態(tài)功能的。自發(fā)布以來，已經(jīng)廣泛應(yīng)用于開發(fā)中。 如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應(yīng)用的部分。 首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...

    AlexTuan 評論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

    摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計使用的站點是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。 一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒有React創(chuàng)新的性能優(yōu)化...

    AlphaWallet 評論0 收藏0

  • 純css實現(xiàn)Magicline Navigation(下劃線動畫導(dǎo)航菜單)

    摘要：布局實現(xiàn)基本樣式，不多解釋實現(xiàn)導(dǎo)航下劃線下面實現(xiàn)動畫部分。這里就完成了一個純的下劃線動畫導(dǎo)航。最后的效果查看擴展當(dāng)我們會實現(xiàn)水平的下劃線動畫導(dǎo)航后，實現(xiàn)背景移動動畫導(dǎo)航思路也是一樣，不過是高度寬度的變化，背景透明度的變化。 showImg(http://qubaoming.me/wp-content/uploads/2015/04/a1-300x135.jpg); 看別人網(wǎng)站的時候，看...

    Apollo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<