语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>前端技术 >>CSS >>CSS3立体文字实例

CSS3立体文字实例

2019/3/12 22:02:03 0人评论 323次 作者:FedFun

上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯!…

 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/whqet/article/details/25051237

上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯!

案例效果还是在codepen,在线研究点这里,下载收藏点这里。


1.单单纯纯的效果一

1.jpg

为了简化操作,我们使用和上一篇文章《纯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

2.jpg

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


我用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让阴影动起来

3.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实现逐字控制

4.jpg

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

/*   “个性”升级的效果五,彩虹字 */

@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,在线研究点这里,下载收藏点这里。


----------------------------------------------------------


前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。

-----------------------------------------------------------------------------------

上一篇:没有了

下一篇:纯CSS3文字效果推荐

相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮