Reines CSS3 zur Erzielung eines 3D-Texteffekts (Quellcode-Analyse)

Dieser Artikel führt Sie durch die Implementierungsprinzipien von 3D-Texteffekten. Er berücksichtigt nicht die Wiederverwendbarkeit und Portabilität. Ich hoffe, dass er für alle hilfreich ist.

1. Einfacher Effekt 1

Um die Bedienung zu vereinfachen, verwenden wir die gleiche Dokumentstruktur wie im vorherigen Artikel „Reine CSS3-Texteffektempfehlung“, die nachfolgenden Effekte sind jedoch recht unterschiedlich . Wenn es schlecht ist, wird es nicht erneut aufgeführt.

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

Im CSS schauen wir uns zunächst die globalen Einstellungen an. Sie sind immer noch die gleichen wie im vorherigen Artikel, aber um visuelle Ermüdung zu vermeiden, haben wir die Hintergrundfarbe und die Textfarbe geändert.

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

Dann gibt es den Kerncode des einfachen Effekts eins

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

Daraus können wir ersehen, dass es drei Elemente gibt, um Textschatten zu verwenden, um einen dreidimensionalen Effekt zu erzielen:

• Setzen Sie mehrere Schatten, um ein Gefühl von zu erzielen Tiefe,
• Die Höhe und Summe der Schatten. Vertikale Offset-Änderungen erzeugen ein Richtungsgefühl, und
• Farbverläufe der Schatten erzeugen ein Gefühl der Staffelung.

Obwohl diese Implementierungsmethode einfach ist, ist sie nicht sehr portierbar und lässt sich nur schlecht wiederverwenden. Stellen Sie sich vor, wie man die dreidimensionalen Zeichen in verschiedene Richtungen ändern kann. Wie setzt man dreidimensionale Zeichen in verschiedenen Farben um? Was soll ich tun, wenn es mühsam ist, Wort für Wort unterschiedliche Effekte zu erzielen? Was ist, wenn eine Animation erforderlich ist?

Als nächstes werden wir diese Fragen einzeln beantworten, indem wir den „einfachen“ Effekt 1 schrittweise verbessern.

2. Der zweite Effekt des „Nein“-Sagens: Sass implementiert 3D-Text-Mixin. Die Kinderschuhe sagten: „Bruder, was ist mit der Änderung? Es scheint sich nicht von der vorherigen zu unterscheiden.“ eins? Bitte haben Sie etwas Geduld und Sie werden es verstehen, nachdem Sie sich den Code angesehen haben.

Ich habe mit sass einen Text-3D-Mixin geschrieben. Mit diesem Mixin können wir die Tiefe, Richtung und Staffelung der dreidimensionalen Zeichen leicht steuern.

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

Wie wäre es damit? Mit diesem in sass implementierten Mix können wir ganz einfach dreidimensionale Charaktere realisieren und sie animieren.

3. Der dritte Effekt von „Hyperaktivität“, Animation, bringt die Schatten in Bewegung

Mit dem Mixin in Effekt zwei kommt Effekt drei ganz natürlich.

/*  “多动”效果三， 加上动画 */
.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. Der vierte Effekt des Zeigens von „Persönlichkeit“: Lettering.js realisiert die Wort-für-Wort-Steuerung Folgender Code wird angezeigt.

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

Wir müssen jquery.js und lettering.js in die Seite importieren und können sie dann verwenden.

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

Dann nutzen Sie Sass, um eine personalisierte Kontrolle zu erreichen, „adjust-hue“ generiert kontinuierliche Farbtonfarben und die @for-Schleife implementiert die Durchquerung.

/*   彰显“个性”的效果四，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. „Persönlichkeit“-Upgrade-Effekt fünf, Regenbogenwortanimation

/*   “个性”升级的效果五，彩虹字 */
@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. Natürlich wurde Text-Shadow bis IE10 erhalten relativ vollständige Unterstützung, was soll ich also mit IE9 machen? Besonders in China, das ein fanatischer XP-Fan ist. Glücklicherweise kann der integrierte Filter des IE den gleichen Effekt erzielen, daher gibt es diese Textschatten-Polyfüllung. Hier verwenden wir Sass, um Textschatten zu patchen.

In diesem Fall gilt es für Browser unter IE9, Our text3d mixin muss so geändert werden

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

Viel Spaß.

Der Falleffekt ist immer noch in Codepen:Online-Recherche: http://codepen.io/whqet/pen/eGuqf

Mehr Programmierung Verwandtes Wissen finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonReines CSS3 zur Erzielung eines 3D-Texteffekts (Quellcode-Analyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!