两个小按钮效果 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="name" content="content" charset="utf-8">
    <script src="jquery-3.0.0.js"></script>
    <style type="text/css" media="screen">
        .btn,.btn2{
            width:100px;
            height:50px;
            /*border:2px solid #333;*/
            text-align: center;
            line-height: 50px;
            background-color: gray;
            transition: all linear 1s;
            color: #fff;
            border-top:translateX(100px);
        }
        .btn:hover{
            color:#333;
            background-color: #fff;
        }
        
        .border-top,.border-bottom{
            border-top:2px solid #333;
            width:100px;
            position:absolute;
        }
        .border-left,.border-right{
            height:50px;
            border-left: 2px solid #333;
            position:absolute;
        }
        .top{
            animation: border-top linear 1s;
        }
        .right{
            animation: border-right linear 1s;
        }
        .bottom{
            animation: border-bottom linear 1s;
        }
        .left{
            animation: border-left linear 1s;
        }
        .border-bottom{
            top:58px;
        }
        .border-left{
            left:8px;
            top:9px;
        }
        .border-right{
            left:106px;
            top:9px;
        }
        @keyframes border-top{
            0%{
                transform:translateX(-100px);
            }
            100%{
                transform:none;
            }
        }
        @keyframes border-right{
            0%{
                transform:translateY(-50px);
            }
            100%{
                transform:translateY(0px);
            }
        }
        @keyframes border-bottom{
            0%{
                transform:translateX(100px);
            }
            100%{
                transform:none;
            }
        }
        @keyframes border-left{
            0%{
                transform:translateY(50px);
            }
            100%{
                transform:translateY(0px);
            }
        }
        .btn2{
            margin-top:1px;
            width:400px;
            background-color: #fff;
            color:#333;
        }
        .dotted{
            width:1000px;
            border-top:2px dashed #333;
            position:absolute;
            top:0px;
            left:-592px;
        }
        .dotted-bottom{
            width:1000px;
            border-top:2px dashed #333;
            position:absolute;
            top:0px;
        }
        .box{
            position:relative;
            margin-top:100px;
            overflow: hidden;
            width:400px;
        }
        .dotted-bottom{    
            top:48px;
            right:0px;
        }
        .dotted-left{    
            position:absolute;
            top:0px;
            left:0px;
            height:400px;
            border-left:2px dashed #333;
        }
        .dotted-right{    
            position:absolute;
            bottom:0px;
            right:0px;
            height:400px;
            border-left:2px dashed #333;
        }
    </style>
</head>
<body>
    <div class="border-top"></div>
    <div class="border-left"></div>
    <div class="border-bottom"></div>
    <div class="border-right"></div>
    <div class="btn">
        按钮
    </div>
    <div class="box">
        <div class="btn2">
            按钮
        </div>
        <div class="dotted"></div>
        <div class="dotted-left"></div>
        <div class="dotted-bottom"></div>
        <div class="dotted-right"></div>
    </div>
    <script>
        $('.btn').hover(function(){
            $('.border-top').addClass('top');
            $('.border-right').addClass('right');
            $('.border-bottom').addClass('bottom');
            $('.border-left').addClass('left');
        },function(){
            $('.border-top').removeClass('top');
            $('.border-right').removeClass('right');
            $('.border-bottom').removeClass('bottom');
            $('.border-left').removeClass('left');
        })
        setInterval(function(){
            var n = parseInt($('.dotted').css('left').slice(0,-2));
            var top = parseInt($('.dotted-left').css('top').slice(0,-2));
            n+=2;
            if( n<0 ){
                $('.dotted').css('left',n+'px');
                $('.dotted-bottom').css('right',n+'px');
            }else{
                $('.dotted').css('left','-592px')
                $('.dotted-bottom').css('right','0px');
            }
            top -= 2;
            if(top > -350){
                $('.dotted-left').css('top',top + 'px');
                $('.dotted-right').css('bottom',top + 'px');
            }else{
                $('.dotted-left').css('top','0px');
                $('.dotted-right').css('bottom','0px');
            }
        },60)
    </script>
</body>
</html>

 

posted @ 2016-09-01 11:39  蛋Mrs炒饭  阅读(155)  评论(0)    收藏  举报