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>
  • 相关阅读:
    python爬虫入门 爬图片的,用百度搜图,直接下,类型受限不过可以直接下,简单不少,下图片可以用
    TIME_WAIT状态原理(转)
    Unix网络编程的实现具体流程
    logistic损失函数的解释
    最大似然估计的复习(转)
    洛谷 P1022 计算器的改良
    洛谷P1012 拼数
    洛谷 P1073 最优贸易
    洛谷 P1098 字符串的展开
    洛谷 P3802 小魔女帕琪
  • 原文地址:https://www.cnblogs.com/wanbi/p/4182608.html
Copyright © 2011-2022 走看看