Web前端CSS3如何實(shí)現(xiàn)文字折紙效果？

本篇文章給大家通過(guò)示例介紹一下如何使用CSS3來(lái)實(shí)現(xiàn)文字折紙的效果，進(jìn)一步利用CSS3的transform和transition屬性來(lái)實(shí)現(xiàn)鼠標(biāo)移過(guò)字體放大的效果。請(qǐng)注意，這個(gè)3D文字效果是用純CSS的，沒(méi)有用Javascript，并且需要用支持CSS3的瀏覽器才能看出效果，如firefox、chrome、safari和opera。

有著一定的參考價(jià)值，現(xiàn)在分享給大家，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

代碼如下:

.example-class

{

text-shadow: [X offset] [Y offset] [Blur size] [Colour];

}

X表示x軸上的位移，可為負(fù)值；Y表示y軸上的位移，可為負(fù)值；Blur表示投影的寬度，不能為負(fù)值；Color為投影的顏色。 
堆疊多層CSS投影 
雖然我們沒(méi)有必要堆疊多層投影，但通過(guò)堆疊多層投影會(huì)有更好的3D效果

到這里你已經(jīng)創(chuàng)建了基本的3D文字，然而，讓我們進(jìn)一步來(lái)實(shí)現(xiàn)鼠標(biāo)滑過(guò)的文字放大效果，并用css的transision屬性實(shí)現(xiàn)圓滑的淡入淡出效果。 
首先用transform屬性實(shí)現(xiàn)滑過(guò)字體放大

復(fù)制代碼

代碼如下:

h2:hover

{

/* CSS3 Transform Effect */

-webkit-transform: scale(1.2); /* Safari & Chrome */

-moz-transform: scale(1.2); /* Firefox */

-o-transform: scale(1.2); /* Opera */

}

到此，我們就用CSS3如何實(shí)現(xiàn)文字折紙的效果，并且在鼠標(biāo)滑過(guò)是讓字體放大，且有淡入淡出的效果，這一切是用純CSS實(shí)現(xiàn)的哦。