CSS3立体文字最佳实践

原文地址：https://www.cnblogs.com/lcchuguo/p/5202698.html

1.单单纯纯的效果一

为了简化操作。我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构，后面的效果大差小不差。也就不再列出。

前端开发whqet

css里面还是首先来全局的设置，依旧和上一篇文章大差小不差，只是为了避免视觉疲劳，我们改动了背景颜色和文字颜色。 body{ background-color: #666; } @import url(http://fonts.googleapis.com/css?family=Dosis:500,800); .text { font-family:"微软雅黑", "Dosis", sans-serif; font-size: 80px; text-align: center; font-weight: bold; line-height:200px; text-transform:uppercase; position: relative; } 然后是简单单纯的效果一的核心代码 /*简单单纯的效果一*/ .effect01{ background-color: #7ABCFF; color:#FFD300; text-shadow: 0px 0px 0 #b89800, 1px -1px 0 #b39400, 2px -2px 0 #ad8f00, 3px -3px 0 #a88b00, 4px -4px 0 #a38700, 5px -5px 0 #9e8300, 6px -6px 0 #997f00, 7px -7px 0 #947a00, 8px -8px 0 #8f7600, 9px -9px 0 #8a7200, 10px -10px 0 #856e00, 11px -11px 0 #806a00, 12px -12px 0 #7a6500, 13px -13px 12px rgba(0, 0, 0, 0.55), 13px -13px 1px rgba(0, 0, 0, 0.5); } 从中我们能够看出，利用text-shadow实现立体效果的要素有三： 设置多个阴影实现纵深感。 阴影的水平和垂直偏移变化实现方向感， 阴影的颜色渐变实现错落感。 这种实现的方式虽说单纯，可是可移植性不强、复用性差，试想一下，不同方向的立体字怎样改动？不同颜色的立体字怎样实现？逐字实现不同效果肿么办？假设须要动画又怎样？

接下来，通过逐步完好“单纯”的效果一。我们来一一解答这些疑问。

2.对“单纯”说不的效果二，sass实现3d文字mixin

童鞋们就说了，哥，变化呢，好像跟前面那个没差别呀？大家且耐心。看看代码就明确了。

我用sass写了一个text 3d的mixin。利用这个mixin我们能够轻松控制，立体字的纵深感、方向感、错落感。

/* 对“单纯”说不的效果二， sass实现的华丽转身 */

/**

• 利用text-shadow实现3d文字效果

• $color 立体字的初始颜色

• $dx 立体字水平偏移位置。dx>0,向右偏，建议取值[-2,2]

• $dy 立体字垂直偏移位置。dy>0,向下偏。建议取值[-2,2]，dx和dy配合控制立体字的方向

• $steps 立体字的层叠数量

• $darken 立体字的颜色变暗数值。建议取值[0,1],须要结合层叠数量，避免过多的黑色出现

• @copyright 前端开发whqet，http://blog.csdn.net/whqet
  */
  @mixin text3d($color: #ffd300, $dx: 1, $dy:-1,$steps:10, KaTeX parse error: Expected '}', got 'EOF' at end of input: …en:.1) { color:color;
  $color:darken($color,30%);

  $output: ‘’;
  $x:0px;
  $y:0px;
  @for $n from 1 to $steps{
  $output: KaTeX parse error: Expected 'EOF', got '#' at position 11: output + '#̲{x} #{KaTeX parse error: Expected 'EOF', got '}' at position 2: y}̲ 0 #{color},’;
  $x:$x+$dx;
  $y:$y+$dy;
  $color:darken($color, $darken\ast ($n+10));
  }
  $output: KaTeX parse error: Expected 'EOF', got '#' at position 9: output+'#̲{x} #{KaTeX parse error: Expected 'EOF', got '}' at position 2: y}̲ 12px rgba(0,0,…x} #{$y} 1px rgba(0,0,0,0.5);’;

  text-shadow:unquote($output);
  }

.effect02{
@include text3d(#00d3ff,1,-1,15,.05);
}
肿么样。大家细致研究啦，利用sass实现的这个mixin，我们能够很easy的实现立体字，而且能够搞起来动画，请看效果三。
3.“多动”的效果三，animation让阴影动起来

有了效果二中的mixin。效果三就自然而然了。

/* “多动”效果三， 加上动画 */
.effect03{
animation:animateShadow 2s linear infinite;
}
@keyframes animateShadow{
0% {@include text3d(#00d3ff,1,1,15,.05); }
25% {@include text3d(#00d3ff,-1,-1,15,.05); }
50% {@include text3d(#00d3ff,1,1,15,.05); }
75% {@include text3d(#00d3ff,-1.5,1.5,15,.05); }
}
4. 彰显“个性”的效果四，lettering.js实现逐字控制

lettering.js是一个功能强大的jquery插件，能够把字符串拆分。相似于以下代码所看到的。

前端开发whqet

前 端 开 发 w h q e t

我们须要在页面里导入jquery.js和lettering.js，然后，我们就能够使用了。 然后，利用sass实现个性化控制，adjust-hue生成连续色相的颜色，@for循环实现遍历。 /* 彰显“个性”的效果四，lettering.js实现逐字控制 */ .effect04{ letter-spacing:.1em; } $base:#FFD300; @for $i from 1 through 9 { .effect04 .char#{$i} { @include text3d(adjust-hue($base, $i *15deg),-1,1,10,.05) } } 5. “个性”升级的效果五，彩虹字动画

/* “个性”升级的效果五。彩虹字 /
@for KaTeX parse error: Expected '}', got '#' at position 40: ….effect05 .char#̲{i} {
animation: rainbow 2s linear infinite;
animation-delay: 0.1s * $i;
}
}
$base2:#7E00FF;
@keyframes rainbow {
@for KaTeX parse error: Expected '}', got '#' at position 27: …rough 10 { #̲{i 10%} {@include text3d(adjust-hue($base2, $i *36deg), 1, 1, 10,.1); }
}
}
6.text-shadow IE9-的解决方式
当然。不幸的是直到IE10。text-shadow才得到了比較完好的支持，那么IE9-怎么办呢，尤其是在xp的狂热爱好的中国。
所幸IE自带的滤镜能够达到一样的效果。所以就有了这个text-shadow polyfill，我们这里使用sass的方式来补丁text-shadow.

这种话针对ie9以下的浏览器，我们的text3d mixin要这样改动
/**

• 利用text-shadow实现3d文字效果

• $color 立体字的初始颜色

• $dx 立体字水平偏移位置。dx>0,向右偏。建议取值[-2,2]

• $dy 立体字垂直偏移位置，dy>0,向下偏，建议取值[-2,2]。dx和dy配合控制立体字的方向

• $steps 立体字的层叠数量

• $darken 立体字的颜色变暗数值，建议取值[0,1],须要结合层叠数量。避免过多的黑色出现

• @copyright 前端开发whqet，http://blog.csdn.net/whqet
  */
  @mixin text3d($color: #ffd300, $dx: 1, $dy:-1,$steps:10, KaTeX parse error: Expected '}', got 'EOF' at end of input: …en:.1) { color:color;
  $color:darken($color,30%);

  $output: ‘’;
  $x:0px;
  $y:0px;
  @for $n from 1 to $steps{
  $output: KaTeX parse error: Expected 'EOF', got '#' at position 11: output + '#̲{x} #{KaTeX parse error: Expected 'EOF', got '}' at position 2: y}̲ 0 #{color},’;
  $x:$x+$dx;
  $y:$y+$dy;
  $color:darken($color, $darken\ast ($n+10));
  }
  $output: KaTeX parse error: Expected 'EOF', got '#' at position 9: output+'#̲{x} #{KaTeX parse error: Expected 'EOF', got '}' at position 2: y}̲ 12px rgba(0,0,…x} #{$y} 1px rgba(0,0,0,0.5);’;

  //for the mordern browser
  //text-shadow:unquote($output);

  //just for ie9-，这里做了改动
  @include jquery-text-shadow(unquote($output));
  }