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部分