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

3D效果文字

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

CSS3燃燒文字特效

主要通過(guò)text-shadow及jquery的動(dòng)態(tài)渲染實(shí)現(xiàn)的一個(gè)燃燒效果

CSS3文字顏色漸變特效

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

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

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

CSS3內(nèi)陰影Inset效果

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

經(jīng) 總結(jié)，一般我們?cè)谧鯟SS3文字特效時(shí)用的比較多的是text-shadow、transform、transition、-webkit-text- stroke、background-clip這幾個(gè)屬性。其他很多效果無(wú)非也就是這幾種的不同組合，當(dāng)然我也是剛剛開(kāi)始學(xué)這方面的，有說(shuō)的不對(duì)的地方請(qǐng) 指出。

轉(zhuǎn)載請(qǐng)自覺(jué)注明來(lái)源：HTML5中文網(wǎng)站