1.单单纯纯的效果一
为了简化操作,我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构,后面的效果大差小不差,也就不再列出。
- <div contenteditable="true" class="text effect01">前端开发whqet</div>
- 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);
- }
- 设置多个阴影实现纵深感,
- 阴影的水平和垂直偏移变化实现方向感,
- 阴影的颜色渐变实现错落感。
这种实现的方式虽说单纯,但是可移植性不强、复用性差,试想一下,不同方向的立体字如何修改?不同颜色的立体字如何实现?逐字实现不同效果肿么办?如果需要动画又如何?
接下来,通过逐步完善“单纯”的效果一,我们来一一解答这些疑问。
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);
- }
3.“多动”的效果三,animation让阴影动起来
![](https://img-my.csdn.net/uploads/201405/06/1399353859_7410.gif)
有了效果二中的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,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>
- /* 彰显“个性”的效果四,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. “个性”升级的效果五,彩虹字动画
![](https://img-my.csdn.net/uploads/201405/06/1399354235_4684.gif-thumb.jpg)
- /* “个性”升级的效果五,彩虹字 */
- @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));
- }