首页 > 代码库 > 两个小按钮效果
两个小按钮效果
<!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>
两个小按钮效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。