3Dテキスト効果を実現する純粋なCSS3（ソースコード分析）-CSSチュートリアル-php.cn

この記事では、3D テキスト効果の実装原理について説明します。コードの再利用性と移植性は考慮されていません。一定の参考価値があります。必要な友人は参照できます。役立つことを願っています。みんな。

3Dテキスト効果を実現する純粋なCSS3（ソースコード分析）

1. 簡単な効果 1

操作を簡単にするためでは、以前の記事「推奨される Pure 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;  
}

ログイン後にコピー

次に、単純なエフェクト 1 のコアコード

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

ログイン後にコピー

から、3 次元効果を実現するために text-shadow を使用する 3 つの要素があることがわかります。

この実装方法はシンプルですが、移植性が低く、再利用性が低く、3D キャラクターをさまざまな方向に修正するにはどうすればよいでしょうか。色違いの立体キャラクターを実装するにはどうすればよいですか？一言一句異なる効果を実現するのが面倒な場合はどうすればよいでしょうか?では、アニメーションが必要な場合はどうすればよいでしょうか?

次に、「シンプルな」効果を徐々に改善していくことで、これらの質問に 1 つずつ答えていきます。

#2. 「シンプル」をやめることの 2 番目の効果、sass は 3D テキストミックスインを実装します

# # 子供たちの靴は「お兄さん、その変化はどうですか? 前の靴と何ら変わらないようですね?」と言いました。コードを見れば理解できると思いますので、しばらくお待ちください。

sass を使用してテキスト 3D ミックスインを作成しました。このミックスインを使用すると、立体文字の深さ、方向、千鳥を簡単に制御できます。

/*  对“单纯”说不的效果二，  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: &#39;&#39;;
  $x:0px;
  $y:0px;
  @for $n from 1 to $steps{
    $output: $output + &#39;#{$x} #{$y} 0 #{$color},&#39;;
    $x:$x+$dx;
    $y:$y+$dy;
    $color:darken($color, $darken * ($n+10));
  }
  $output: $output+&#39;#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);&#39;;
  
  text-shadow:unquote($output);
}
 
.effect02{
    @include text3d(#00d3ff,1,-1,15,.05);
}

ログイン後にコピー

これはどのようなものですか?よく見てみましょう。sass に実装されたこの mixin を使用すると、簡単に 3 次元のキャラクターを実現し、アニメーションさせることができます。3 番目の効果をご覧ください。

3. 3 番目のエフェクト「多動性」、アニメーションで影を動かします

2 番目のエフェクト Mixin を使用, 効果3は自然と出てきます。

/*  “多动”效果三， 加上动画 */
.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.「個性」を出す4つ目の効果、letering.jsで単語単位の制御を実現

##letring.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.「個性」アップグレード効果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.テキスト-shadow IE9- の解決策

もちろん、残念なことに、text-shadow は IE10 まで比較的完全なサポートを受けていませんでした。そのため、IE9- は何をすべきか、特にXPが熱狂的な趣味となっている中国。幸いなことに、IE の組み込みフィルターでも同じ効果を実現できるため、テキストシャドウポリフィルがあります。ここでは、sass を使用してテキストシャドウにパッチを当てます。

この場合、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: &#39;&#39;;
  $x:0px;
  $y:0px;
  @for $n from 1 to $steps{
    $output: $output + &#39;#{$x} #{$y} 0 #{$color},&#39;;
    $x:$x+$dx;
    $y:$y+$dy;
    $color:darken($color, $darken * ($n+10));
  }
  $output: $output+&#39;#{$x} #{$y} 12px rgba(0,0,0,0.3),#{$x} #{$y} 1px rgba(0,0,0,0.5);&#39;;
  
  //for the mordern browser
  //text-shadow:unquote($output);
  
  //just for ie9-，这里做了修改
  @include jquery-text-shadow(unquote($output));
}

ログイン後にコピー

お楽しみください。

このケースの影響はまだ残っています。コードペン: