大致样式：每个按钮由上下两部分组成，上半部分实现鼠标滑过－放大并且旋转，下半部分市县鼠标滑过－背景颜色变化，带有四个线条动画，并且显示提示文字
幽灵按钮－上半部分
幽灵按钮－下半部分
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/空，特定的属性比如widthtransition-duration: 取值可能为秒XXXs或者毫秒XXXmstransition-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
