HTML幽灵按键

关于HTML按键幽灵的代码分享：

首先设置三个DIV，通过<div>+<a>+<span>，把页面搭建好。

<div class="content">
        <div class="box box-mission">
            <span class="icon"></span>
            <a href="#" class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                MISSION
            </a>
        </div>
        <div class="box box-play">
            <span class="icon"></span>
            <a href="#" class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                PLAY
            </a>
        </div>
        <div class="box box-touch">
            <span class="icon"></span>
            <a href="#" class="button">
                <span class="line line-top"></span>
                <span class="line line-right"></span>
                <span class="line line-bottom"></span>
                <span class="line line-left"></span>
                TOUCH
            </a>
        </div>

    </div>

然后是CSS样式，都是最基本的样式，1点需要注意下，线条的样式控制，计算好每个线条出现的位置（宽度以及高度）。代码如下：

<style type="text/css">
        *{
            margin:0；
            padding:0;
        }
        body{
            background: #333;
        }
        .content{
            width: 1000px;
            height: 400px;
            
            margin: 20px auto;

        }
        .content .box{
            width:201px;
            height: 220px;
            
            float: left;
            margin: 0 60px;
        }
        .box-mission .icon{
            width: 164px;
            height: 155px;
            background: url(img/number.jpg) no-repeat; 
            display:block;
            margin: 0 auto;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -o-transition: all 0.2s;
            -moz-transition: all 0.2s;
        }
        .box-mission .icon:hover{
            transform: scale(1.2) rotate(360deg);
            -webkit-transform: scale(1.2) rotate(360deg);
            -o-transform: scale(1.2) rotate(360deg);
            -moz-transform: scale(1.2) rotate(360deg);
        }

        .box-play .icon{
            width: 174px;
            height: 155px;
            background: url(img/number.jpg) no-repeat; 
            display:block;
            margin: 0 auto;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -o-transition: all 0.2s;
            -moz-transition: all 0.2s;
        }
        .box-play .icon:hover{
            transform: scale(1.2) rotate(360deg);
            -webkit-transform: scale(1.2) rotate(360deg);
            -o-transform: scale(1.2) rotate(360deg);
            -moz-transform: scale(1.2) rotate(360deg);
        }

        .box-touch .icon{
            width: 174px;
            height: 155px;
            background: url(img/number.jpg) no-repeat; 
            display:block;
            margin: 0 auto;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -o-transition: all 0.2s;
            -moz-transition: all 0.2s;
        }
        .box-touch .icon:hover{
            transform: scale(1.2) rotate(360deg);
            -webkit-transform: scale(1.2) rotate(360deg);
            -o-transform: scale(1.2) rotate(360deg);
            -moz-transform: scale(1.2) rotate(360deg);
        }
        .box .button{
            width: 116px;
            height: 45px;
            display: block;
            margin: 30px auto;
            font-family: "微软雅黑";
            font-size: 18px;
            font-weight: bold;
            color:#2ecc71; 
            text-decoration: none;
            line-height: 45px;
            padding-left: 35px;
            background: url(img/number.jpg) no-repeat 130px;     /*按钮图片*/
            border: 2px solid rgba(255,255,255,0.7);
            transition: all 0.2 ease;
            -webkit-transition: all 0.2 ease;
            -o-transition: all 0.2 ease;
            -moz-transition: all 0.2 ease;
            position: relative;
        }
        .box .button:hover{
            background-position: 140px center;
            border: 2px solid rgba(255.255.255.1);
        }
        .box .line{
            background-color: white;
            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;
        }
        /*顶部线条
         高度不变为2px
         宽度为116+55+2*2=175px;
        */
        .box .line-top{
             width: 0px;
             height: 2px;
             top: -2px;
             left: -100%;
             
         }
        .box .button:hover  .line-top{
              left: -2px;
              width: 155px;
         }
         /*低部线条
         高度不变为2px
         宽度为116+55+2*2=175px;
        */
         .box .line-bottom{
             width: 0px;
             height: 2px;
             bottom: -2px;
             right:  -100%;
             
         }
         .box .button:hover  .line-bottom{
              right: -2px;
              width: 155px;
         }
         /*左部线条  从下向上过渡到按钮的左边框位置
         宽度不变，高度是
         宽度为116+55+2*2=175px;
        */
         .box .line-left{
             width: 2px;
             height: 0px;
             bottom: -100%;
             left:  -2px;
             
         }
         .box .button:hover .line-left{
              height:  49px;
              bottom:  -2px;
         }
         /*右边线条
         从上向下过渡到按钮的左边框位置
         宽度不变，高度是
         宽度为116+55+2*2=175px;
         */
         .box .line-right{
             width: 2px;
             height: 0px;
             top: -100%;
             right:  -2px;
             
         }
         .box .button:hover .line-right{
              height:  49px;
              top:  -2px;
         }
    </style>