1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>幽灵按钮</title> 6 <link rel="stylesheet" type="text/css" href="css/幽灵按钮.css"> 7 </head> 8 <body> 9 <div class="content"> 10 <div class="box box-mission"> 11 <span class="icon"></span> 12 <!-- 按钮 --> 13 <a href="#" class="button"> 14 <span class="line line-top"></span> 15 <span class="line line-right"></span> 16 <span class="line line-bottom"></span> 17 <span class="line line-left"></span> 18 MISSION 19 </a> 20 </div> 21 <div class="box box-play"> 22 <span class="icon"></span> 23 <a href="#" class="button"> 24 <span class="line line-top"></span> 25 <span class="line line-right"></span> 26 <span class="line line-bottom"></span> 27 <span class="line line-left"></span> 28 PLAY 29 </a> 30 </div> 31 <div class="box box-touch"> 32 <span class="icon"></span> 33 <a href="#" class="button"> 34 <span class="line line-top"></span> 35 <span class="line line-right"></span> 36 <span class="line line-bottom"></span> 37 <span class="line line-left"></span> 38 TOUCH 39 </a> 40 </div> 41 </div> 42 </body> 43 </html>
1 *{margin: 0;padding: 0;} 2 body{background: #333;} 3 .content{width: 1000px;height: 400px;margin:50px auto;} 4 @media screen and (min- 1000px){.content .box{width: 205px;height: 220px;float: left;margin:0 60px;}} 5 @media screen and(max- 500px){.content .box{width: 205px;height: 220px;}} 6 /*三个图片动画*/ 7 .box-mission .icon{width: 174px;height: 155px;display: block;background:url(../img/游戏手柄.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;} 8 .box-play .icon{width: 174px;height: 155px;display: block;background:url(../img/火箭.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;} 9 .box-touch .icon{width: 174px;height: 155px;display: block;background:url(../img/地图.svg) no-repeat;margin: 0 auto;transition: all 0.2s;-webkit-transition: all 0.2s;-o-transition: all 0.2s;-moz-transition: all 0.2s;} 10 .box-mission .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);} 11 .box-play .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);} 12 .box-touch .icon:hover{transform: scale(1.3)rotate(360deg);-webkit-transform: scale(1.3)rotate(360deg);-o-transform: scale(1.3)rotate(360deg);-moz-transform: scale(1.3)rotate(360deg);} 13 14 /*按钮*/ 15 .box .button{width: 156px;height: 45px;line-height: 50px;display: block;margin: 20px auto;font-family: "微软雅黑";font-size: 18px;font-weight: bolder;color: #2ecc71;text-decoration: none;background: url(../img/右键.svg) no-repeat 127px;padding: 0 20px;border: 2px solid rgba(255,255,255,.8);transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;position: relative;} 16 .box .button:hover{background-position: 135px center;} 17 /*设直线条*/ 18 .box .line{background-color: #2ecc71;display: block;position: absolute;transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-o-transition: all 0.2s ease;-moz-transition: all 0.2s ease;} 19 /*顶部：从左到右过渡到按钮的上边框位置，高度不变2px，宽度由0到200px；*/ 20 .box .line-top,.box .line-bottom{width: 0px;height: 2px;} 21 .box .line-top{top:-2px;left: -100px;} 22 .box .button:hover .line-top{width: 200px;left: -2px;} 23 24 /*底部：从右到左过渡到按钮的上边框位置，高度不变2px，宽度由0到200px；*/ 25 .box .line-bottom{bottom:-2px;right: -100px;} 26 .box .button:hover .line-bottom{width: 200px;right: -2px;} 27 /*左部：从下向上过渡到按钮的左边框位置，宽度不变2px；宽度由0到49px；*/ 28 .box .line-left,.box .line-right{width: 2px;height: 0px;} 29 .box .line-left{bottom: -80px;left: -2px;} 30 .box .button:hover .line-left{height: 49px;bottom: -2px;} 31 /*右部：从上向下过渡到按钮的左边框位置，宽度不变2px；宽度由0到49px；*/ 32 .box .line-right{top: -80px;right: -2px;} 33 .box .button:hover .line-right{height: 49px;top: -2px;}
