纯CSS3实现3d立体文字效果（源码分析）

1.单单纯纯的效果一

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

div contentedITable="true" class="text effect01">
    前端开发whqet/div>
    

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, $darken:.1) {
      color:$color;
      $color:darken($color,30%);
       $output: '';
      $x:0px;
      $y:0px;
  @for $n From 1 to $steps{
    $output: $output + '#{
$x}
 #{
$y}
 0 #{
$color}
    ,';
        $x:$x+$dx;
        $y:$y+$dy;
        $color:darken($color, $darken * ($n+10));
  }
  $output: $output+'#{
$x}
 #{
$y}
 12px rgba(0,0,0,0.3),#{
$x}
 #{
$y}
     1px rgba(0,0,0,0.5);
    ';
        text-shadow:unquote($output);
}
 .effect02{
        @include text3d(#00d3ff,1,-1,15,.05);
}
    

肿么样，大家仔细研究啦，利用sass实现的这个mixin，我们可以非常简单的实现立体字，并且可以搞起来动画，请看效果三。

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插件，可以把字符串拆分，类似于下面代码所示。

div contenteditable="true" class="text effect04">
    前端开发whqet/div>
    !-- 拆分成这样 -->
    div contenteditable="true" class="text effect04">
    	span class="char1">
    前/span>
    	span class="char2">
    端/span>
    	span class="char3">
    开/span>
    	span class="char4">
    发/span>
    	span class="char5">
    w/span>
    	span class="char6">
    h/span>
    	span class="char7">
    q/span>
    	span class="char8">
    e/span>
    	span class="char9">
    t/span>
    /div>
    

我们需要在页面里导入jquery.js和lettering.js，然后，我们就可以使用了。

!-- 引入jquery，cdn方式 -->
    script src="//cdnjs.clouDFlare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    /script>
    !-- 引入lettering，cdn方式 -->
    script src="//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js">
    /script>
    !-- 使用lettering -->
    script>
    	//JS is only used to keep the HTML markup clean	$(".effect04").lettering();
    /script>
    

然后，利用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 $i from 1 through 10 {
  .effect05 .char#{
$i}
 {
         animation: rainbow 2s linear infinite;
        animation-delay: 0.1s * $i;
  }
}
    $base2:#7E00FF;
@keyframes rainbow {
  @for $i from 0 through 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, $darken:.1) {
      color:$color;
      $color:darken($color,30%);
       $output: '';
      $x:0px;
      $y:0px;
  @for $n from 1 to $steps{
    $output: $output + '#{
$x}
 #{
$y}
 0 #{
$color}
    ,';
        $x:$x+$dx;
        $y:$y+$dy;
        $color:darken($color, $darken * ($n+10));
  }
  $output: $output+'#{
$x}
 #{
$y}
 12px rgba(0,0,0,0.3),#{
$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));
}
    

Enjoy it.

案例效果还是在codepen：

在线研究：http://codepen.io/whqet/pen/eGuqf

更多编程相关知识，请访问：编程视频！！

以上就是纯CSS3实现3d立体文字效果（源码分析）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！