CSS3提供了許多炫酷的效果，其中包括向上平移的點(diǎn)擊效果。

實(shí)現(xiàn)該效果的代碼如下：

.button{
position:relative;
overflow:hidden;
}
.button:hover span{ 
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.button span{
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
padding: 10px 0;
background: #333;
color: #fff;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

解釋?zhuān)?/p>

• 將按鈕元素設(shè)為相對(duì)定位，以便內(nèi)部元素的半透明層使用絕對(duì)定位時(shí)相對(duì)于該元素進(jìn)行定位。
• 定義半透明層的位置和大?。撼跏嘉恢脼殡x按鈕底部一百個(gè)百分點(diǎn)的距離（即被遮擋?。瑢挾蠕仢M(mǎn)按鈕的整個(gè)寬度，高度外部不可見(jiàn)但是將鼠標(biāo)懸停時(shí)向上抬起的變化部分也計(jì)算了進(jìn)去，即padding-top：10px + margin-top：-10px。
• 定義樣式過(guò)渡效果的時(shí)間、效果及屬性：鼠標(biāo)懸停在按鈕上面時(shí)，半透明層的位置向上平移一百個(gè)百分點(diǎn)，代碼分別使用了-webkit、-moz、-ms和無(wú)前綴的方式來(lái)支持各個(gè)瀏覽器。