3D 텍스트 효과를 구현하는 순수 CSS3(소스 코드 분석)-CSS 튜토리얼-php.cn

이 글은 3D 텍스트 효과의 구현 원칙을 안내합니다. 코드의 재사용성과 이식성을 고려하지 않았습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

3D 텍스트 효과를 구현하는 순수 CSS3(소스 코드 분석)

1. 간단한 효과 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;  
}

로그인 후 복사

그런 다음 간단한 효과 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차원 효과를 얻는 세 가지 요소가 있음을 알 수 있습니다.

여러 그림자를 설정하여 입체적인 효과를 얻습니다. 깊이,
그림자의 수준과 합이 수직 오프셋 변화로 방향성을 만들고, 그림자의
색상 그라데이션이 경이로움을 만들어냅니다.

이 구현 방법은 간단하지만 이식성이 좋지 않고 재사용성이 좋지 않습니다. 입체 캐릭터를 어떻게 다른 방향으로 수정할 수 있을까요? 다양한 색상의 입체 캐릭터를 구현하는 방법은 무엇입니까? 단어마다 다른 효과를 얻는 것이 지루하다면 어떻게 해야 할까요? 그렇다면 애니메이션이 필요하다면 어떨까요?

다음으로, "간단한" 효과 1을 점차적으로 개선하여 이러한 질문에 하나씩 답변해 드리겠습니다.

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에 구현된 이 믹스인을 사용하면 입체적인 캐릭터를 쉽게 구현하고 애니메이션화할 수 있습니다.

3. "과다행동"의 세 번째 효과, 애니메이션이 그림자를 움직이게 합니다

효과 2에 믹스인을 사용하면 효과 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 "개성"을 보여주는 네 번째 효과, 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. "성격" 업그레이드 효과 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-solution

물론, IE10까지는 text -shadow를 받았습니다. 상대적으로 완벽한 지원을 제공하므로 IE9로 무엇을 해야 할까요? 특히 XP의 열렬한 팬인 중국에서는 더욱 그렇습니다. 다행히 IE와 함께 제공되는 필터도 동일한 효과를 얻을 수 있으므로 텍스트 섀도우 폴리필이 있습니다. 여기서는 sass를 사용하여 텍스트 섀도우를 패치합니다.

이 경우에는 IE9 이하 브라우저용입니다. text3d 믹스인을 이렇게 수정해야 합니다

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

로그인 후 복사

즐기세요.