大致樣式：每個按鈕由上下兩部分組成，上半部分實現鼠標滑過－放大并且旋轉，下半部分市縣鼠標滑過－背景顏色變化，帶有四個線條動畫，并且顯示提示文字
幽靈按鈕－上半部分
幽靈按鈕－下半部分
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屬性，鼠標滑過按鈕時，只會看到突兀的放大效果，而去看不到轉動的效果，因為沒有過程，所以轉動的效果相當于沒有?。?/em>
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
