• 技术文章 >web前端 >css教程

    纯CSS3实现3d立体文字效果(源码分析)

    青灯夜游青灯夜游2021-05-26 09:53:43转载444
    本篇文章带大家了解一下3d文字效果的实现原理,没有考虑代码的复用性和可移植性,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

    然后是简单单纯的效果一的核心代码

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

    从中我们可以看出,利用text-shadow实现立体效果的要素有三:

    这种实现的方式虽说单纯,但是可移植性不强、复用性差,试想一下,不同方向的立体字如何修改?不同颜色的立体字如何实现?逐字实现不同效果肿么办?如果需要动画又如何?

    接下来,通过逐步完善“单纯”的效果一,我们来一一解答这些疑问。

    2.对“单纯”说不的效果二,sass实现3d文字mixin


    童鞋们就说了,哥,变化呢,好像跟前面那个没区别呀?大家且耐心,看看代码就明白了。

    我用sass写了一个text 3d的mixin,利用这个mixin我们可以轻松控制,立体字的纵深感、方向感、错落感。

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

    肿么样,大家仔细研究啦,利用sass实现的这个mixin,我们可以非常简单的实现立体字,并且可以搞起来动画,请看效果三。

    3.“多动”的效果三,animation让阴影动起来


    有了效果二中的mixin,效果三就自然而然了。

    /*  “多动”效果三, 加上动画 */
    .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. “个性”升级的效果五,彩虹字动画


    /*   “个性”升级的效果五,彩虹字 */
    @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-的解决方案

    当然,不幸的是直到IE10,text-shadow才得到了比较完善的支持,那么IE9-怎么办呢,尤其是在xp的狂热爱好的中国。所幸IE自带的滤镜可以达到一样的效果,所以就有了这个text-shadow polyfill,我们这里使用sass的方式来补丁text-shadow.

    这样的话针对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: '';
      $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.

    案例效果还是在codepen:

    在线研究:http://codepen.io/whqet/pen/eGuqf

    更多编程相关知识,请访问:编程视频!!

    以上就是纯CSS3实现3d立体文字效果(源码分析)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:CSS3 立体文字 3d
    上一篇:css如何修改滚动条箭头样式 下一篇:css分割线怎么设置
    第16期线上培训班

    相关文章推荐

    • CSS3如何实现流星雨效果?(代码示例)• 详解CSS3+SVG滤镜实现不规则边框的方法• css3怎么实现3d翻转效果• 通过代码示例,了解css3+javascript按钮水波纹效果• 详解三种CSS3模糊背景效果(代码实例)• 纯CSS3如何实现文字效果?8种文字效果分享

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网