H5实战(五)：幽灵按钮效果

1.目标效果

现在幽灵按钮是网站上十分常见的一种效果，通过使按钮变的薄透来提高页面的美观性，这里我们要实现的效果是有三个图片，在鼠标悬浮时可以放大并旋转360度，每个图标下面都有一个幽灵按钮，当鼠标悬浮时会有四边飞入，tooltip等效果，下面介绍下实现的具体过程。

2.实现思路

1）图片部分：

首先设定整体盒子的宽度，然后设定每个装有图片和按钮的盒子的宽度，span标签以背景图片的方式导入图片，设定旋转放大效果。这里注意transition的使用，它是在原来的未变化的样式中设置的。

2）按钮部分：

设定按钮的宽高、边框、边距等样式，这里注意 box-sizing: border-box;属性的使用，当设置宽高后，设定的边距等会将原有的盒子撑大，而使用这一个属性，会使得盒子的大小就是所设定的宽高的值，内边距等在此基础上向内计算，然后设置四边飞入的效果，每个飞入的边都是span标签设定宽高而成，这里面最上边由左侧飞入，动画效果是由left:－110%，width:0变成left:－2，width:100%。

3）tooltip部分

由于按钮等宽高已经设定完毕，现在加入的tooltip最好放在三个大盒子标签的外面，设定其样式设为绝对定位并隐藏(opacity = 0)并用span标签制作一个倒三角，然后使用jquery完成下面的部分，为每个盒子设置data-title属性，即要写入tooltip中的内容，当鼠标悬浮时，将data-title中的内容写入em标签，在设定其left属性并设置变化的动画，即top与opacity数值的改变。至此效果完成。

3.代码实现

1）html部分