萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 如何利用CSS3制作3D文字效果

如何利用CSS3制作3D文字效果

  下面這篇教程是教你如何用CSS3來制作3D效果的文字,文章翻譯自3D CSS Shadow Text Tutorial。

  這個簡單的CSS文本陰影教程將一步步教你如何通過堆疊多層陰影來創建3D文字,然後進一步利用CSS3的transform和transition屬性來實現鼠標移過字體放大的效果。請注意,這個3D文字效果是用純CSS的,沒有用Javascript,並且需要用支持CSS3的浏覽器才能看出效果,如firefox、chrome、safari和opera。

  CSS文字陰影是如何實現的

為了實現3D的文字效果,我們將會利用CSS3的text-shadow屬性,text-shadow的工作原理如下:

1
2
3
4 .example-class
{
    text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

譯者注:X表示x軸上的位移,可為負值;Y表示y軸上的位移,可為負值;Blur表示投影的寬度,不能為負值;Color為投影的顏色。

  堆疊多層CSS投影

  雖然我們沒有必要堆疊多層投影,但通過堆疊多層投影會有更好的3D效果

  開始創建3D文字

你可能會選擇比文字更深的顏色來作為投影的顏色,所以這個例子中我就用白色的文字,用深一點的灰色作為投影顏色,這個例子中我將H2的文字渲染3D效果,css代碼如下:

1
2
3
4
5
6
7
8
9
10 h2
{
    text-shadow:
    1px
1px 0 
#CCC,
    2px
2px 0 
#CCC, /* end of 2 level deep grey shadow */
    3px
3px 0 
#444,
    4px
4px 0 
#444,
    5px
5px 0 
#444,
    6px
6px 0 
#444; /* end of 4 level deep dark shadow */
}

效果如下:

  好了,到這裡你已經創建了基本的3D文字,然而,讓我們進一步來實現鼠標滑過的文字放大效果,並用css的transision屬性實現圓滑的淡入淡出效果。

首先用transform屬性實現滑過字體放大

1
2
3
4
5
6
7 h2:hover
{
    /* CSS3 Transform Effect */
    -webkit-transform: scale(1.2);    
/* Safari & Chrome */
    -moz-transform: scale(1.2);       
/* Firefox */
    -o-transform: scale(1.2);         
/* Opera */
}

效果如下:然後利用transition屬性實現淡入淡出效果

1
2
3
4
5
6
7 h2
{
    /* CSS3 Transition Effect */
    -webkit-transition:
all 0.12s ease-out;    
/* Safari & Chrome */
    -moz-transition:
all 0.12s ease-out;       
/* Firefox */
    -o-transition:
all 0.12s ease-out;     
/* Opera */
}

到此,我們就用CSS3實現了3D效果的文字,並且在鼠標滑過是讓字體放大,且有淡入淡出的效果,這一切是用純CSS實現的哦。

  下面是這個例子的DEMO,一起看看

  3D CSS TEXT

  WITH ‘ZOOM’

copyright © 萬盛學電腦網 all rights reserved