<!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>
