zoukankan      html  css  js  c++  java
  • 幽灵按钮

    <style>
        *{margin: 0; padding:0;}
        .btn{
            position: relative;
            display: inline-block;
            padding: 0 40px 0 15px;
            border: 2px solid rgba(255, 255, 255, 0.4);
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            line-height: 30px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
        .btn i{
            position: absolute;
            top: 0;
            right: 20px;
            color: #fff;
            font-size: 12px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
    
        .line{position: absolute;
            opacity: 0;
            background: #fff;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
        .line-top{
            width:0;
            height: 2px;
            left: -110%;
            top: -2px;
        }
        .line-right{
            right: -2px;
            top: -110%;
            width:2px;
            height: 0;
        }
        .line-bottom{
            width:0;
            height: 2px;
            right: -110%;
            bottom: -2px;
        }
        .line-left{
            left: -2px;
            bottom: -110%;
            width:2px;
            height: 0;
        }
        .btn:hover .line{
            opacity: 1;;
        }
        .btn:hover .line-top{
            left: 0;
            width: 100%;
        }
        .btn:hover .line-right{
            top: 0;
            height: 100%;
        }
        .btn:hover .line-bottom{
            right: 2px;
            width: 100%;
        }
        .btn:hover .line-left{
            bottom: 0;
            height: 100%;
        }
        .btn:hover{
            border: 2px solid #fff;
        }
        .btn:hover i{
            right: 10px;
        }
    </style>
    <div style="400px; padding:100px; margin: 0 auto; background: #444444;">
        <a href="#" class="btn">
            Buttons
            <span class="line line-top"></span>
            <span class="line line-right"></span>
            <span class="line line-bottom"></span>
            <span class="line line-left"></span>
            <i></i>
        </a>
    </div>
  • 相关阅读:
    shell快捷键
    通过调整tcp参数来防范DDOS攻击
    解决 nf_conntrack: table full, dropping packet 的几种思路
    Linux系统资源限制
    解决Out of socket memory问题
    wrk简介
    部分 TCP 参数简介
    P1706 全排列问题
    P1149 [NOIP2008 提高组] 火柴棒等式
    P1104 生日
  • 原文地址:https://www.cnblogs.com/wanbi/p/4182608.html
Copyright © 2011-2022 走看看