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

3D效果文字

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

image

CSS3燃烧文字特效

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

image

CSS3文字颜色渐变特效

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

image

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

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

image

CSS3内阴影Inset效果

主要用background-clip属性来完成这个Inset效果。CSS3中的background-clip属性,其主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景显示区域。

image

经总结,一般我们在做CSS3文字特效时用的比较多的是text-shadow、transform、transition、-webkit-text-stroke、background-clip这几个属性。其他很多效果无非也就是这几种的不同组合,当然我也是刚刚开始学这方面的,有说的不对的地方请指出。

转载请自觉注明来源:http://www.itivy.com/html5/archive/2012/1/12/five-css3-text-effects.html

==================================

订阅HTML5中文网站:http://feed.feedsky.com/cnhtml5

新浪微博: http://weibo.com/pphtml5

QQ交流群:227834832(注明加入理由)