发布于
10个text-shadow制作的文字效果
css3的text-shadow属性能帮助我们设计很多有特效的文字效果,特别是运用在英文字体上。早前在《CSS3的文字阴影—text-shadow》和《CSS3 制作文字特效》两篇文章中有介绍过一些使用css3的text-shadow制作的特效,今天老调重谈,我使用css3的text-shadow写了十个文字效果,希望大家喜欢。
大漠
阅读全文
css3的text-shadow属性能帮助我们设计很多有特效的文字效果,特别是运用在英文字体上。早前在《CSS3的文字阴影—text-shadow》和《CSS3 制作文字特效》两篇文章中有介绍过一些使用css3的text-shadow制作的特效,今天老调重谈,我使用css3的text-shadow写了十个文字效果,希望大家喜欢。
3D的文字特效都是通过text-shadow属性来制作的,其原理很简单,就是多个text-shadow的属性值叠加,模拟出3D的效果。其中主要一点就是掌握角度值,也就是X轴和Y轴的位置。今天我通过3D css Text Generator在线工具,生成了0、45、90、135、180、224、270、315和360九个不同角度的3D文字效果,将其代码放上来给大家参考。当然大家还可以通过这个在线工具,设计相关的参数。工具使用方法很简单,我就不细说了。
好像没有写CSS3方面的Demo效果了,今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例,觉得很有意思,也就动手一试了,真心的爽。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效果主要由transform的rotate3d来制作,在不同的时间段设置不同的效果,另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。