盘点5个典型的CSS3文字特效

近两年，HTML5和CSS3似乎正在掀起一场互联网的革命，各种人才纷纷涌向了这波浪潮，各种HTML5创新应用也如雨后春笋般冒了出来。的确， 这应该是未来WEB的趋势了。这两天我也在学习HTML5和CSS3方面的知识，同时总结了几个典型的CSS3的文字特效，放在自己的博客“HTML5 中文网站”上。网上CSS3文字特效的例子非常多，但这几个特效应该说都很具有代表性的，其他的也基本都是基于这5个扩展开来的，一起来总结一下吧。

3D效果文字

主要用到text-shadow的多层堆叠实现平滑的投影效果，并通过transform实现鼠标滑过文字放大及通过transition实现淡入淡出的效果

CSS3燃烧文字特效

主要通过text-shadow及jquery的动态渲染实现的一个燃烧效果

CSS3文字颜色渐变特效

这个主要是通过-webkit-gradient实现渐变的，由于是基于webkit内核的，所以只有在基于webkit内核的chrome和safari浏览器下才有效果。

CSS3文字边框和镂空文字效果

这个效果主要利用-webkit-text-stroke来完成的，-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。

CSS3内阴影Inset效果

主要用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

转载于:https://www.cnblogs.com/sxwgf/archive/2012/01/12/css3-text-effects.html