国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自定義超鏈接動畫---transition

沈儉 / 1294人閱讀

?效果圖：

<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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1005.html

相關(guān)文章

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

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

    Olivia 評論0 收藏0

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

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

    XboxYan 評論0 收藏0

  • 簡易實踐的vue自定義tab入門

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

    Benedict Evans 評論0 收藏0

  • 簡易實踐的vue自定義tab入門

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

    Cc_2011 評論0 收藏0

發(fā)表評論

0條評論

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