怎样运用CSS3制做三d实际效果文本实际完成款式

2021-03-10 07:35 jianzhan
下面这篇实例教程是教你怎样用CSS3来制做三d实际效果的文本,文章内容汉语翻译自三d CSS Shadow Text Tutorial。


这个简易的CSS文字黑影实例教程将1步步教你怎样根据层叠多层黑影来建立三d文本,随后进1步运用CSS3的transform和transition特性来完成电脑鼠标移过字体样式变大的实际效果。请留意,这个三d文本实际效果是用纯CSS的,沒有用Javascript,而且必须用适用CSS3的访问器才可以看出实际效果,如firefox、chrome、safari和opera。
CSS文本黑影是怎样完成的
以便完成三d的文本实际效果,大家可能运用CSS3的text-shadow特性,text-shadow的工作中基本原理以下:

拷贝编码
编码以下:

.example-class
{
text-shadow: [X offset] [Y offset] [Blur size] [Colour];
}

译者注:X表明x轴上的位移,可为负值;Y表明y轴上的位移,可为负值;Blur表明投射的宽度,不可以为负值;Color为投射的色调。
层叠多层CSS投射
尽管大家沒有必要层叠多层投射,但根据层叠多层投射会有更好的三d实际效果

刚开始建立三d文本
你将会会挑选比文本更深的色调来做为投射的色调,因此这个事例中我就用白色的文本,用深1点的灰色做为投射色调,这个事例中我将H2的文本3D渲染三d实际效果,css编码以下:

拷贝编码
编码以下:

h2
{
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444; /* end of 4 level deep dark shadow */
}

实际效果以下:


好了,到这里你早已建立了基础的三d文本,但是,让大家进1步来完成电脑鼠标滑过的文本变大实际效果,并用css的transision特性完成圆润的淡入淡出实际效果。
最先用transform特性完成滑过字体样式变大

拷贝编码
编码以下:

h2:hover
{
/* CSS3 Transform Effect */
-webkit-transform: scale(1.2); /* Safari & Chrome */
-moz-transform: scale(1.2); /* Firefox */
-o-transform: scale(1.2); /* Opera */
}

实际效果以下:

随后运用transition特性完成淡入淡出实际效果

拷贝编码
编码以下:

h2
{
/* CSS3 Transition Effect */
-webkit-transition: all 0.12s ease-out; /* Safari & Chrome */
-moz-transition: all 0.12s ease-out; /* Firefox */
-o-transition: all 0.12s ease-out; /* Opera */
}

到此,大家就用CSS3完成了三d实际效果的文本,而且在电脑鼠标滑过是让字体样式变大,且有淡入淡出的实际效果,这1切是用纯CSS完成的哦。
下面是这个事例的DEMO,1起看看
D CSS TEXT
WITH ‘ZOOM’