近 兩年，HTML5和CSS3似乎正在掀起一場互聯(lián)網的革命，各種人才紛紛涌向了這波浪潮，各種HTML5創(chuàng)新應用也如雨后春筍般冒了出來。的確，這應該是 未來WEB的趨勢了。這兩天也在學習HTML5和CSS3方面的知識，同時總結了幾個典型的CSS3的文字特效，分享到“HTML5中文網站”上。網上CSS3文字特效的例子非常多，但這幾個特效應該說都很具有代表性的，其他的也基本都是基于這5個擴展開來的，一起來總結一下吧。

3D效果文字

主要用到text-shadow的多層堆疊實現(xiàn)平滑的投影效果，并通過transform實現(xiàn)鼠標滑過文字放大及通過transition實現(xiàn)淡入淡出的效果

CSS3燃燒文字特效

主要通過text-shadow及jquery的動態(tài)渲染實現(xiàn)的一個燃燒效果

CSS3文字顏色漸變特效

這個主要是通過-webkit-gradient實現(xiàn)漸變的，由于是基于webkit內核的，所以只有在基于webkit內核的chrome和safari瀏覽器下才有效果。

CSS3文字邊框和鏤空文字效果

這個效果主要利用-webkit-text-stroke來完成的，-webkit-text-stroke可以為文字添加邊框。它不但可以設置文字邊框的寬度，也能設置其顏色。而且，配合使用color: transparent屬性，你還可以創(chuàng)建鏤空的字體。

CSS3內陰影Inset效果

主要用background-clip屬性來完成這個Inset效果。CSS3中的background-clip屬性，其主要是用來確定背景的裁剪區(qū)域，換句話說，就是如何控制元素背景顯示區(qū)域。

經 總結，一般我們在做CSS3文字特效時用的比較多的是text-shadow、transform、transition、-webkit-text- stroke、background-clip這幾個屬性。其他很多效果無非也就是這幾種的不同組合，當然我也是剛剛開始學這方面的，有說的不對的地方請 指出。

轉載請自覺注明來源：HTML5中文網站