利用CSS3中的transition和transform属性 做了一个比较炫酷的幽灵按钮
需要加入Jquery库
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="js/jquery.js"></script> </head> <body> <div class="box"> <div class="link link-mission"> <span class="icon"></span> <a href="#" class="button" data-title="My mission is clear"> MISSION <span class="line line-top"></span> <span class="line line-left"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> </a> </div> <div class="link link-play"> <span class="icon"></span> <a href="#" class="button" data-title="This is my playground"> PLAY <span class="line line-top"></span> <span class="line line-left"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> </a> </div> <div class="link link-touch"> <span class="icon" ></span> <a href="#" class="button" data-title="Let's do something together"> TOUCH <span class="line line-top"></span> <span class="line line-left"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> </a> </div> <div class="tip"> <em></em> <span></span> </div> </div> <script> $(function(){ $(".link .button").hover(function(){ var title = $(this).attr("data-title"); $(".tip em").text(title); var pos = $(this).offset().left; var dis = ($(".tip").outerWidth()-$(this).outerWidth())/2; var f = pos-dis; $(".tip").css({"left":f+"px"}).stop(true,true).animate({"top":180,"opacity":1},300); },function(){ $(".tip").stop(true,true).animate({"top":160,"opacity":0},300); }); }) </script> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; } body{ background:#333; } .box{ width:1000px; height:280px; margin:50px auto; } .box .link{ width:205px; height:280px; float:left; margin:0 20px; } .link span.icon{ width:100%; height:190px; display:inline-block; transition:linear 0.15s; -moz-transition:linear 0.15s; -ms-transition:linear 0.15s; -o-transition:linear 0.15s; -webkit-transition:linear 0.15s; } .link-mission span.icon{ background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-console.svg") no-repeat center center; background-size:178px 109px; } .link-play span.icon{ background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-rocket.svg") no-repeat center center; background-size:178px 109px; } .link-touch span.icon{ background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-location.svg") no-repeat center center; background-size:178px 109px; } .link .icon:hover{ transform:rotate(360deg) scale(1.3); } .button{ display:block; width:180px; height:50px; text-decoration:none; line-height:45px; color:#2DCB70; font-family:"Microsoft yahei"; font-weight:bold; border:2px solid rgba(255,255,255,0.8); padding-left:20px; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; background:url("http://www.iuvo.si/sites/www.iuvo.si/themes/iuvo/images/svg/icon-button-arrow.svg") no-repeat 130px center; background-size:26px 20px; position:relative; transition:ease 0.5s; -moz-transition:ease 0.5s; -ms-transition:ease 0.5s; -o-transition:ease 0.5s; } .button:hover{ border:2px solid rgba(255,255,255,1); background-position:140px; } /* 飞线 top: 1.高度不变 2.宽度变（0-盒子宽） 3.位置：左-右
left:
1.宽度不变
2.高度变（0-盒子高）
3.位置:底-头
…
*/ .button:hover .line{ background:#fff; } .button .line{ position:absolute; display:block; background:none; } .button .line-top{ height:2px; width:0px; left:-110%; top:-2px; transition:ease 0.5s; -moz-transition:ease 0.5s; -ms-transition:ease 0.5s; -o-transition:ease 0.5s; -transition:ease 0.5s; } .button:hover .line-top{ width:100%; left:-2px; } .button .line-left{ width:2px; height:0px; bottom:-110%; left:-2px; transition:ease 0.5s; -moz-transition:ease 0.5s; -ms-transition:ease 0.5s; -o-transition:ease 0.5s; -transition:ease 0.5s; } .button:hover .line-left{ height:100%; bottom:-2px; } .button .line-right{ width:2px; height:0px; top:-110%; right:-2px; transition:ease 0.5s; -moz-transition:ease 0.5s; -ms-transition:ease 0.5s; -o-transition:ease 0.5s; -transition:ease 0.5s; } .button:hover .line-right{ height:100%; top:-2px; } .button .line-bottom{ width:0px; height:2px; bottom:-2px; right:-110%; transition:ease 0.5s; -moz-transition:ease 0.5s; -ms-transition:ease 0.5s; -o-transition:ease 0.5s; -transition:ease 0.5s; } .button:hover .line-bottom{ width:100%; right:-2px; } .box .tip{ position:absolute; padding:0 14px; height:35px; line-height:35px; background:#2DCB70; color:#fff; top:160px; font-weight:bold; text-transform:none; margin:0 auto; border-radius:3px; opacity:0; } .tip em{ font-style:normal; font-family:"Microsoft yahei"; font-weight:100; } .tip span{ position:absolute; width:0px; height:0px; overflow:hidden; border:7px solid transparent; border-top-color:#2DCB70; left:50%; margin-left:-3px; bottom:-14px; }