CSS3下实现幽灵按钮

在HTML5和CSS3中，新增加了很多新的特性，在CSS3中的动画效果：transition和animation为网页制作许多炫酷的效果提供了方便的方法；

下面展示很多网页上炫酷的幽灵按钮的制作过程

先来看看效果图：

截图中三个大的图形当鼠标滑过的时候会顺时针旋转360°，并且会逐渐放大，下面的提示按钮在光标移动过的时候会周围的边框会像射线一样聚拢形成一个白色的边框，并出现在正上方出现绿色的提示框；

本人写blog不是很多，算是练手，你们看到就YY一下吧，萌萌哒

首先看整个网页文件的布局：

在整个大的div区域内可以平分成3个等大小的子div区域，在每个子div区域内，有可以划分成两个区域；子div区域内的上部分区域用来承载图像，在这里我们可以使用span属性来承载，在下面的子区域放置的是一个按钮，我们可以使用a属性来设置；除此之外，在演示中我们可以看到，当鼠标划入按钮时，四条边框从四周射入，因此我们需要单独绘制这四条边框，同样我们可以使用span属性来承载,提示框内的数据可以用data属性进行设置，便于js的获取：

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

添加样式

在这里，我们将第二层的三个的子div的共同特性单独抽取到一个样式link中，再将按钮的四条边框的共同特性定义到一个样式line中，再分别定义各级元素的样式，如下：

    *{margin: 0px;padding: 0px;}
    body{
        background: #333;
    }
    .box{
        width: 800px;
        height: 280px;
        margin: 5px auto;
    }
    .box .link{
        width: 205px;
        height: 280px;
        float: left;
        margin: 0 20px;
    }
    .link .icon{
        display: inline-block;
        width: 100%;
        height: 190px;
    }
    .link-miss .icon{
        background: url("../images/mission.png") no-repeat center center;
    }
    .link-play .icon{
        background: url("../images/play.png") no-repeat center center;
    }
    .link-touch .icon{
        background: url("../images/touch.png") no-repeat center center;
    }

显示三个图标之后，再对三个图标添加动画效果，注意，在添加动画效果的时候，应当注意到浏览器的兼容性

.link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -mz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}

接着添加Button，并定义其样式：

.button{
    display: block;
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    color: green;
    font-family: Arial;
    font-weight: bolder;
    border: 2px solid rgba(255,255,255,0.6);
    padding-left: 20px;
    margin: 0 auto;
}

通过审查元素，我们可以发现，整个按钮的大小为204px与图标的宽度（205px）相近，显然，这并不是我们想要的效果，我们期望的是button的总宽度（包括border和padding）的大小为180px，下面有两种做法:

1. 在CSS2.1中我们可以通过计算将content的宽度，padding的宽度，border的宽度相加，使其总宽度为180px，因此content的宽度应为156px，我们可以将样式button中的width的属性值设置为156px

2. 在CSS3中我们则可以借助box-sizing这个属性进行指定针对元素的宽度与高度的计算，默认值为content-box，表示元素的宽度与高度不包括内补白区域以及边框的宽度高度；第二个属性值为：border-box，表示元素的宽度与高度包括内补白区域以及边框的宽度与高度，在使用box-sizing的同时需要注意到浏览器的兼容性问题，在button样式内添加如下代码，将width的属性值改会180px：

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -mz-box-sizing: border-box;
    -o-box-sizing: border-box;

其次我们为 按钮添加箭头的图标，同样地在button样式内添加如下代码,将图像设置为不平铺：

background: url("../images/allow.png") no-repeat;

我们可以看到，箭头出现在按钮的左上方，这是很正常的，因为图像作为整个按钮的子元素，默认是靠left，和top；这时我们可以设置一下箭头图标的样式，将button样式内的background添加如下属性值，代码如下：

    background: url("../images/allow.png") no-repeat 130px center;

到这一步，按钮的基本制作基本完成，接下来可以制作按钮的动画效果：

• 箭头图标的向右渐变滑动效果，代码如下：

.button:hover{
    border: 2px solid rgba(255, 255, 255, 1);
    background-position: 140px;
}

我们可以明显地看到当鼠标移动上去之后，按钮的边框颜色由浅变深，箭头向右移动吗，但是效果有点僵硬，这个时候我们可以为其添加过渡效果，在button属性内添加transition属性，代码如下：

     transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;

有点长，所以关于边框的特效和提醒框的特效在下一篇续上，哇哈哈…