本篇文章带大家了解一下3d文字效果的实现原理，没有考虑代码的复用性和可移植性，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
1.单单纯纯的效果一
为了简化操作，我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构，后面的效果大差小不差，也就不再列出。
前端开发whqet
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插件，可以把字符串拆分，类似于下面代码所示。
前端开发whqet前端开发whqet
我们需要在页面里导入jquery.js和lettering.js，然后，我们就可以使用了。
//JS is only used to keep the HTML markup clean$(".effect04").lettering();
然后，利用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立体文字效果（源码分析）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1620297.html
微信扫一扫 
支付宝扫一扫 
