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

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

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

代碼如下:

.example-class

{

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

}

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

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

復(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如何實現(xiàn)文字折紙的效果，并且在鼠標(biāo)滑過是讓字體放大，且有淡入淡出的效果，這一切是用純CSS實現(xiàn)的哦。