首頁 > 開發者 > JavaScript
CSS3 文本3D效果，css3文本3d
代碼如下：
<!DOCTYPE html><html><head><style>h1{color: #3D3D3D;font-size: 200px;text-shadow: 0px -1px 0px #858585, 0px 1px 10px rgba(0, 0, 0, 0.6), 0px 6px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.25), 0px 15px 10px rgba(0, 0, 0, 0.2), 0px 25px 15px rgba(0, 0, 0, 0.15);}</style></head><body><h1>文本3D效果！</h1></body></html>
效果如：
複製代碼代碼如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}譯者註：X表示x軸上的位移，可為負值；Y表示y軸上的位移，可為負值；Blur表示投影的寬度，不能為負值；Color為投影的顏色。堆疊多層CSS投影雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果開始建立3D文字你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個例子中我就用白色的文字，用深一點的灰色作為投影顏色，這個例子中我將H2的文字渲染3D效果，css代碼如下：複製代碼代碼如下: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屬性實現滑過字型放大複製代碼代碼如下: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屬性實現淡入淡出效果複製代碼代碼如下: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實現的哦。
怎利用CSS3製作3D效果文字具體實現樣式解答
複製代碼代碼如下:.example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}譯者註：X表示x軸上的位移，可為負值；Y表示y軸上的位移，可為負值；Blur表示投影的寬度，不能為負值；Color為投影的顏色。
堆疊多層CSS投影
雖然我們沒有必要堆疊多層投影，但通過堆疊多層投影會有更好的3D效果
開始建立3D文字
你可能會選擇比文字更深的顏色來作為投影的顏色，所以這個例子中我就用白色的文字，用深一點的灰色作為投影顏色，這個例子中我將H2的文字渲染3D效果，css代碼如下：
複製代碼代碼如下: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屬性實現滑過字型放大
複製代碼代碼如下: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屬性實現淡入淡出效果
複製代碼代碼如下: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實現的哦。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
