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


     效果图:

    <a href="#">
        <span>HTML</span>
    </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;
            }
  • 相关阅读:
    Java 代码中如何调用 第三方Api
    如何编写README.md
    Gof 设计模式
    系统架构师-笔记
    我的账户
    软件设计师-成绩查询
    spring data jpa
    日志 logback
    spring boot 整合 Camunda
    Spring 中 bean 的生命周期?
  • 原文地址:https://www.cnblogs.com/whnba/p/10666258.html
Copyright © 2020-2023  润新知