Pure CSS3 to achieve 3D text effect (source code analysis)

This article will take you through the implementation principle of 3D text effects. It does not consider the reusability and portability of the code. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

1. Simple effect 1

In order to simplify the operation , we use the same document structure as the previous article "Recommended Pure CSS3 Text Effects". The following effects are quite different, so they will not be listed again.

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

In css, let’s start with the global settings, which are still the same as the previous article. However, in order to avoid visual fatigue, we modified the background color and text color.

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;  
}

Then there is the core code of simple effect one

/*简单单纯的效果一*/
.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);
}

From which we can see that there are three elements to use text-shadow to achieve a three-dimensional effect:

• Set multiple shadows to achieve a sense of depth, the horizontal and vertical offset changes of
• shadows to achieve a sense of direction, and the color gradient of
• shadows to achieve a sense of staggeredness.

Although this implementation method is simple, it is not very portable and has poor reusability. Just imagine, how to modify the three-dimensional characters in different directions? How to implement three-dimensional characters in different colors? What should I do if it’s tedious to achieve different effects word for word? So what if animation is needed?

Next, by gradually improving the "simple" effect one, we will answer these questions one by one.

2. The second effect of saying no to "simple", sass implements 3d text mixin

The children's shoes said, Brother, what about the change? It seems to be no different from the previous one? Please be patient and you will understand after looking at the code.

I wrote a text 3D mixin using sass. Using this mixin, we can easily control the depth, direction and staggeredness of the three-dimensional characters.

/*  对“单纯”说不的效果二，  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);
}

What does it look like? Let’s study it carefully. Using this mixin implemented in sass, we can easily realize three-dimensional characters and animate them. Please see the third effect.

3. The third effect of "hyperactivity", animation makes the shadow move

With the second effect Mixin, effect three will come naturally.

/*  “多动”效果三， 加上动画 */
.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. The fourth effect of showing "personality", lettering.js realizes word-by-word control

lettering. js is a powerful jquery plug-in that can split strings, similar to the code below.

<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>

We need to import jquery.js and lettering.js into the page, and then we can use it.

<!-- 引入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>

Then, use sass to achieve personalized control, adjust-hue generates continuous hue colors, and the @for loop implements traversal.

/*   彰显“个性”的效果四，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. "Personality" upgrade effect five, rainbow character animation

/*   “个性”升级的效果五，彩虹字 */
@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-’s solution

Of course, unfortunately, text-shadow did not receive relatively complete support until IE10, so what should IE9- do, especially It is in China where XP is a fanatical hobby. Fortunately, IE's built-in filter can achieve the same effect, so there is this text-shadow polyfill. Here we use sass to patch text-shadow.

In this case, for browsers below ie9, our text3d mixin should be modified like this

/**
* 利用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.

The effect of the case is still in the codepen:

Online research: http://codepen.io/whqet/pen/eGuqf

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Pure CSS3 to achieve 3D text effect (source code analysis). For more information, please follow other related articles on the PHP Chinese website!