近兩年，HTML5和CSS3似乎正在掀起一場互聯網的革命，各種人才紛紛涌向了這波浪潮，各種HTML5創新應用也如雨后春筍般冒了出來。的確， 這應該是未來WEB的趨勢了。這兩天我也在學習HTML5和CSS3方面的知識，同時總結了幾個典型的CSS3的文字特效，放在自己的博客“HTML5 中文網站”上。網上CSS3文字特效的例子非常多，但這幾個特效應該說都很具有代表性的，其他的也基本都是基於這5個擴展開來的，一起來總結一下吧。
主要用到text-shadow的多層堆疊實現平滑的投影效果，並通過transform實現鼠標滑過文字放大及通過transition實現淡入淡出的效果
主要通過text-shadow及jquery的動態渲染實現的一個燃燒效果
這個主要是通過-webkit-gradient實現漸變的，由於是基於webkit內核的，所以只有在基於webkit內核的chrome和safari瀏覽器下才有效果。
這個效果主要利用-webkit-text-stroke來完成的，-webkit-text-stroke可以為文字添加邊框。它不但可以設置文字邊框的寬度，也能設置其顏色。而且，配合使用color: transparent屬性，你還可以創建鏤空的字體。
主要用background-clip屬性來完成這個Inset效果。CSS3中的background-clip屬性，其主要是用來確定背景的裁剪區域，換句話說，就是如何控制元素背景顯示區域。
經總結，一般我們在做CSS3文字特效時用的比較多的是text-shadow、transform、transition、-webkit- text-stroke、background-clip這幾個屬性。其他很多效果無非也就是這幾種的不同組合，當然我也是剛剛開始學這方面的，有說的不 對的地方請指出。
歡迎大家訂閱我的HTML5專題博客：http://feed.feedsky.com/cnhtml5。一起學習探討。
轉載請自覺注明來源： http://www.itivy.com/html5/archive/2012/1/12/five-css3-text-effects.html