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 black2px 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 #fe49022px 2px #fe49023px 3px #fe4902;
  5. }
  6. .shadow:hover {
  7.    position: relative;
  8.    top: -3pxleft: -3px;
  9.    text-shadow: 1px 1px #fe49022px 2px #fe49023px 3px #fe49024px 4px #fe49025px 5px #fe49026px 6px#fe4902;
  10. }

增加动画效果

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

  1. .shadow { color: whitefont: bold 52px Helvetica, Arial, Sans-Serif;
  2.    text-shadow: 1px 1px #fe49022px 2px #fe49023px 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: relativetop: -3pxleft: -3px;
  9.    text-shadow: 1px 1px #fe49022px 2px #fe49023px 3px #fe49024px 4px #fe49025px 5px #fe49026px 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以及以前都不支持哦..


你可能感兴趣的:(css3D文本效果)