CSS3 pur pour obtenir un effet de texte 3D (analyse du code source)-tutoriel CSS-php.cn

Cet article vous présentera le principe de mise en œuvre des effets de texte 3D. Il ne prend pas en compte la réutilisabilité et la portabilité du code. Il a une certaine valeur de référence. J'espère qu'il sera utile. tout le monde.

CSS3 pur pour obtenir un effet de texte 3D (analyse du code source)

1. Effet simple 1

Afin de simplifier l'opération , nous utilisons la même structure de document que l'article précédent "Effets de texte CSS3 purs recommandés". Les effets suivants sont assez différents, ils ne seront donc pas répertoriés à nouveau.

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

Copier après la connexion

Dans le css, commençons par les paramètres globaux, qui sont toujours les mêmes que l'article précédent. Cependant, afin d'éviter la fatigue visuelle, nous avons modifié la couleur de fond et la couleur du texte.

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

Copier après la connexion

Ensuite, il y a le code de base de l'effet simple

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

Copier après la connexion

D'où nous pouvons voir qu'il y a trois éléments pour utiliser text-shadow pour obtenir un effet tridimensionnel :

Définissez plusieurs ombres pour obtenir une impression de profondeur,
changements de décalage horizontal et vertical des ombres pour obtenir une impression d'orientation,
dégradés de couleurs des ombres pour obtenir une impression d'étalement.

Bien que cette méthode de mise en œuvre soit simple, elle n'est pas très portable et est peu réutilisable. Imaginez, comment modifier les caractères tridimensionnels dans différentes directions ? Comment implémenter des personnages tridimensionnels dans différentes couleurs ? Que dois-je faire s’il est fastidieux d’obtenir différents effets mot pour mot ? Et si une animation était nécessaire ?

Ensuite, en améliorant progressivement l'effet "simple" 1, nous répondrons à ces questions une par une.

2. Le deuxième effet de dire non au "simple", sass implémente le mixage de texte 3D

Les chaussures des enfants disaient : Frère, qu'en est-il du changement ? Il ne semble pas être différent du précédent ? Soyez patient et vous comprendrez après avoir regardé le code.

J'ai écrit un mixin de texte 3D en utilisant sass. En utilisant ce mixin, nous pouvons facilement contrôler la profondeur, la direction et le décalage des personnages tridimensionnels.

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

Copier après la connexion

Écoutez, veuillez l'étudier attentivement. En utilisant ce mixin implémenté dans sass, nous pouvons facilement réaliser des personnages en trois dimensions et les animer. Veuillez voir le troisième effet.

3. Le troisième effet de "l'hyperactivité", l'animation fait bouger l'ombre

Le deuxième effet est obtenu Mixin, l'effet trois viendra naturellement.

/*  “多动”效果三， 加上动画 */
.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); }
}

Copier après la connexion

4. Le quatrième effet de montrer la "personnalité", lettering.js réalise un contrôle mot par mot

letter.js est un puissant plug-in jquery qui peut diviser des chaînes, similaire au code ci-dessous.

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

Copier après la connexion

Nous devons importer jquery.js et lettering.js dans la page, puis nous pourrons l'utiliser.

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

Copier après la connexion

Ensuite, utilisez l'audace pour obtenir un contrôle personnalisé, ajuster-hue génère des couleurs de teinte continues et la boucle @for implémente la traversée.

/*   彰显“个性”的效果四，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)
  }
}

Copier après la connexion

5. Effet de mise à niveau "Personnalité" 5, animation du personnage arc-en-ciel

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

Copier après la connexion

6. solution pour text-shadow IE9-

Bien sûr, malheureusement, text-shadow n'a pas reçu de support relativement complet avant IE10, alors que dois-je faire avec IE9-, en particulier est en Chine où XP est un passe-temps fanatique. Heureusement, le filtre fourni avec IE peut obtenir le même effet, il y a donc ce polyfill text-shadow. Ici, nous utilisons sass pour patcher text-shadow.

<🎜. >Dans ce cas, pour les navigateurs inférieurs à ie9, notre mixin text3d devrait être modifié comme ceci

/**
* 利用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));
}

Copier après la connexion

Profitez-en.