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

資訊專欄INFORMATION COLUMN

自定義超鏈接動(dòng)畫---transition

沈儉 / 1306人閱讀

?效果圖：

<a href="#">
    <span>HTMLspan>
a>
a {
            position: relative;
            text-decoration: none;
            display: block;
            text-align: center;
            width: 200px;
        }
        
        /* 繪制上下線條 */
        a::before,
        a::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            transition: width .2s ease-in-out;
            background: #92B901;
        }
        
        /* 固定線條方向 */
        a::before{
            top: 0;
            left: 0;
        }
        a::after{
            bottom: 0;
            right: 0;
        }
        
        /* 過濾效果 */
        a:hover::before,
        a:hover::after{
            width: 0;
        }
        
        
        a span{
            display: block;
            padding: 20px;
        }

        /* 繪制左右線條 */
        a span::before,
        a span::after{
            content: "";
            position: absolute;
            width: 2px;
            height: 100%;
            transition: height .2s ease;
            background: #92B901;
        }
        a span::before{
            bottom: 0;
            left: 0;
        }
        a span::after{
            top: 0;
            right: 0;
        }
        a span:hover::before,
        a span:hover::after{
            height: 0;
        }

?

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

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

相關(guān)文章

  • Vue.js 實(shí)踐（3）：實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件

    摘要：接下來，由簡(jiǎn)入繁依次實(shí)現(xiàn)提示組件的各個(gè)功能。那么第一個(gè)提示的定時(shí)器依然會(huì)錯(cuò)誤的關(guān)閉新提示。增強(qiáng)靈活性最后則是讓提示組件更靈活。 這次的教程里，我們要把組件化進(jìn)行到底！最近半年的幾個(gè)項(xiàng)目中，都遇到了需要使用Toast或者Notification組件的情況。在目前已有的一些基于Vue.js開發(fā)的組件庫，都沒有找到太合適的，所以自己重頭實(shí)現(xiàn)了一個(gè)。歷經(jīng)幾個(gè)項(xiàng)目的磨練，這個(gè)提示組件的功能已經(jīng)越...

    Olivia 評(píng)論0 收藏0

  • Vue.js基礎(chǔ)教程

    摘要：自定義名稱縮放控制器可以使用中的動(dòng)畫設(shè)計(jì)更為華麗的效果。在和中必須使用，不然它們會(huì)同時(shí)生效，動(dòng)畫也會(huì)瞬間完成。先在標(biāo)簽內(nèi)加入，接著類似自定義動(dòng)畫可以給命名。 文章鏈接：Vue.js基礎(chǔ)教程 開發(fā)工具準(zhǔn)備： 根據(jù)個(gè)人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode； 安裝git base和node.js； 安裝vue-cli，命令npm i -g @vue/...

    XboxYan 評(píng)論0 收藏0

  • 簡(jiǎn)易實(shí)踐的vue自定義tab入門

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時(shí)的狀態(tài)。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動(dòng)態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡 章節(jié)鏈接描述 要想實(shí)現(xiàn)tab動(dòng)畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實(shí)現(xiàn)動(dòng)畫效果 條件渲...

    Benedict Evans 評(píng)論0 收藏0

  • 簡(jiǎn)易實(shí)踐的vue自定義tab入門

    摘要：在元素被插入之前生效，在元素被插入之后的下一幀移除。定義進(jìn)入過渡生效時(shí)的狀態(tài)。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。我們用特性來擴(kuò)展，從而達(dá)到可以在這些受限制的元素中使用。 本文基于vue官方文檔，分別為：動(dòng)態(tài)組件 & 異步組件、插槽、進(jìn)入/離開 & 列表過渡 章節(jié)鏈接描述 要想實(shí)現(xiàn)tab動(dòng)畫，首先要了解vue中哪些元素/那些組件適合在那些條件下實(shí)現(xiàn)動(dòng)畫效果 條件渲...

    Cc_2011 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<