CSS3 制作文字特效

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助。废话不说,直接进入效果的制作,感兴趣的同学跟着我的代码制作一次,你肯定会有不少的收获。

Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题,背景色,前景色,阴影色需要采用有一定的亮度对比色,这样效果更佳,请看下面的效果。

				.insetText h2{
					color: #f00;
					text-shadow: 1px 1px 0px #212121;
				}
			

效果如下所示:

text-shadow的使用请点这里

3D Text(3D立体效果)

3D文字效果,在《CSS3的文字阴影—text-shadow》有详细介绍,这里没有使用其他的html标签,只是多次应用了CSS3中的text-shadow属性,进行多次阴影设置,并设置不同的阴影色,从而达到一个立体的文字效果。

			.text3D h2 {
				color: #fff;
				text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2),0 5px 10px rgba(0,0,0,0.25);
			}
			

效果如下所示:

Neon Lights Effect(霓虹灯效果)

霓虹灯效果主要是多次使用text-shadow属性制作阴影,只是这里有一点需要注意,在制作阴影时不设置任何X轴和Y轴的值,只是设置其模糊半径值,并且每次的blur半径取值不同,而且后面的值总是比前面的值大。

				.neonText h2 {
					color: #fff;
					text-shadow:0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #095816, 0 0 25px #095816, 0 0 30px #095816, 0 0 50px #095816, 0 0 80px #095816, 0 0 100px #095816, 0 0 150px #095816
				}
			

效果如下所示:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/text-effect

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部