CSS3 实现幽灵按钮

大致样式：每个按钮由上下两部分组成，上半部分实现鼠标滑过－放大并且旋转，下半部分市县鼠标滑过－背景颜色变化，带有四个线条动画，并且显示提示文字

幽灵按钮－上半部分

幽灵按钮－下半部分

transform 转变

该属性对元素进行2D或3D转换，允许我们对元素进行旋转，缩放，移动或者倾斜。

rotate & scale

举例：
transform: rotate(360deg) scale(1.2);
transform是综合属性， 后面的rotate和scale是附带属性，这些附带属性之间用空格隔开！

兼容问题：

浏览器兼容

为了兼容这些浏览器，要加上这些内核：

transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);

transition 过渡

注意！！ transition写在动画之前，也就是原始状态CSS的类！！动画之后的状态类至写改变之后的代码！！

该属性是简写属性，有四种附属属性，是用来过渡的。--> 有了这个属性，像transform之类的动画才会有过程（本例子中，没有这个transition属性，鼠标滑过按钮时，只会看到突兀的放大效果，而去看不到转动的效果，因为没有过程，所以转动的效果相当于没有！）
transition-property, transition-duration, transition-timing-function, transition-delay

transition

transition-property: 取值可能为 all/ 空， 特定的属性比如width
transition-duration: 取值可能为秒 XXXs或者毫秒 XXXms
transition-timing-function: 取值可能为
（1） linear：规定以相同速度开始至结束的过渡效果，等于 cubic-bezier(0,0,1,1)
（2） ease：规定慢速开始，然后变快，然后慢速结束的过渡效果，等于cubic-bezier(0.25,0.1,0.25,1)
（3） ease-in：规定以慢速开始的过渡效果，等于 cubic-bezier(0.42,0,1,1)
（4） ease-out：规定以慢速结束的过渡效果，等于 cubic-bezier(0,0,0.58,1)
（5） ease-in-out：规定以慢速开始和结束的过渡效果，等于 cubic-bezier(0.42,0,0.58,1)
（6） cubic-bezier(*n*,*n*,*n*,*n*)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
兼容问题：

transition兼容问题

box-sizing

CSS3之前的盒子模型不够灵活，CCS3推出的新属性box-sizing，取值范围为content-box，border-box，inherit

box-sizing

兼容问题：

兼容

举例：
元素总宽度为180px

box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 180px;

border-radius

border-radius是一个简写属性，用于设置四个border-XXX-radius属性（XXX=left, top）
兼容性：
以下浏览器皆支持该属性！

border-radius