css3D文本效果

效果链接

多重文本阴影

这个效果主要运用了css3中的text-shadow属性，通常这样来写：

1. .shadow {
2. text-shadow: 2px 2px 4px #000;
3. }

语法结构：

1. .shadow {
2.    text-shadow: [X offset] [Y offset] [Blur size] [Color];
3. }

我们可以给同一个文本加多个阴影：

1. .shadow {
2.    text-shadow: 1px 1px 0 black, 2px 2px 0 black;
3. }

多个阴影之间用逗号隔开，上面这个css就是给文本加了两个阴影，分别是在x和y轴上都是1像素和都是2像素的阴影。

发挥想象，实现3d效果

想象一下，如果当我们把鼠标移到文本上时，让原来的文本位置向左上方向偏移一下，而原本的位置用阴影来代替，是不是感觉上似乎文字就“凸”出来了。或者，我们给文本xy轴1像素的递增的方式增加阴影，是不是文字好像又“凹”进去了。

1. .shadow {
2.    color: white;
3.    font: bold 52px Helvetica, Arial, Sans-Serif;
4.    text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
5. }
6. .shadow:hover {
7.    position: relative;
8.    top: -3px; left: -3px;
9.    text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px#fe4902;
10. }

增加动画效果

为了不至于看上去阴影出现的太突然，加上动画效果，更加真实、动感。

1. .shadow { color: white; font: bold 52px Helvetica, Arial, Sans-Serif;
2.    text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
3.    -webkit-transition: all 0.12s ease-out;
4.    -moz-transition: all 0.12s ease-out;
5.    -o-transition: all 0.12s ease-out;
6. }
7. .shadow:hover {
8.    position: relative; top: -3px; left: -3px;
9.    text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px#fe4902;
10. }

缩放效果

这是一个效果，也非常实用，让文字看上去也很动感…

1. div:hover {
2.    -webkit-transform: scale(1.1);
3.    -moz-transform: scale(1.1);
4.    -o-transform: scale(1.1);
5.    text-shadow: 3px 3px 0 #333;
6. }

不难看出，以后的文字效果肯定会变化莫测，值得期待！另外说明一下，text-shadow这个属性IE8以及以前都不支持哦..