自定义超链接动画---transition

复制代码

HTML

/* 绘制上下线条 */

    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;
    }