优就业2018七夕活动
 河北
400-650-7353
首页 > IT知识库 > Web前端 > CSS3美化半个字符 颜色混搭随你定

CSS3美化半个字符 颜色混搭随你定

CSS美化半个字符,就是把一个字符劈成两半,一半是A样式,一半是B样式。不论是中文字符还是西文字符,单个字符否是无法拆分的,它们是文字的最新单元。但半个字符如何美化呢?

先看看需要的效果图。

左边是一种颜色,右边是一种颜色。如果是用图片做,这当然很容易,但图片有图片的局限性,比如不能动态的生成字符样式。

CSS美化半个字符的基本思路

思路很简单,就是一个字写两遍,分别显示一半。思路很清楚,也很简单,但如何实现呢?当然不能真的把一个字写两遍,这样也太愚蠢了,而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。

CSS代码

  1. .halfStyle { 
  2.     position:relative
  3.     display:inline-block
  4.     font-size:80px/*  任何宽度都可以 */ 
  5.     colorblack/* 任何颜色,或透明 */ 
  6.     overflow:hidden
  7.     white-spacepre/* 处理空格 */ 
  8. .halfStyle:before { 
  9.     display:block
  10.     z-index:1
  11.     position:absolute
  12.     top:0
  13.     left:0
  14.     width50%
  15.     contentattr(data-content); /* 伪元素的动态获取内容 */ 
  16.     overflow:hidden
  17.     color#f00

HTML代码

  1. <p>单个字符p> 
  2. <span class="halfStyle lazy " data-content="风">span> 
  3. <span class="halfStyle lazy " data-content="流">span> 
  4. <span class="halfStyle lazy " data-content="倜">span> 
  5. <span class="halfStyle lazy " data-content="傥">span> 
  6. <hr/> 
  7. <p>用脚本自动美化:p> 
  8. <span class="textToHalfStyle lazy ">恋爱容易婚姻不易,且行且珍惜。span> 

需要做的就是将.halfStyleCSS类应用到每个需要半边美化的字符上。在上面的代码示例中,每个span里都包含了一个字符,我们在上面放置了data-属性,例如data-content="风",之后在伪元素里我们使用了attr(data-content)方法,这样.halfStyle:before就会变得动态,不需要你手工的硬编码它们的内容。

对于多个字符需要美化的情况,我们可以创建一段jQuery代码自动将所有有.textToHalfStyleCSS类字符添加这种效果:

  1. Query(function($) { 
  2.     var text, chars, $el, i, output; 
  3.  
  4.     // 遍历所有字符 
  5.     $('.textToHalfStyle').each(function(idx, el) { 
  6.         $el = $(el); 
  7.         text = $el.text(); 
  8.         chars = text.split(''); 
  9.  
  10.         // Set the screen-reader text 
  11.         $el.html('' + text + ''); 
  12.  
  13.         // Reset output for appending 
  14.         output = ''
  15.  
  16.         // Iterate over all chars in the text 
  17.         for (i = 0; i < chars.length; i++) { 
  18.             // Create a styled element for each character and append to container 
  19.             output += ' + chars[i] + '">' + chars[i] + ''
  20.         } 
  21.  
  22.         // Write to DOM only once 
  23.         $el.append(output); 
  24.     }); 
  25. }); 

这样,不论是一段文字还是整篇文字,我们都能一次搞定,不必手工一个一个的设置,也不必一个一个的做图!

高级做法:左右半个字符都用伪元素生成

上面我们的做法中,文字的左半边是用:before伪元素生成的,而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用:after实现。

CSS代码

  1. .halfStyle { 
  2.     position:relative
  3.     display:inline-block
  4.     font-size:80px/* or any font size will work */ 
  5.     colortransparent/* hide the base character */ 
  6.     overflow:hidden
  7.     white-spacepre/* to preserve the spaces from collapsing */ 
  8. .halfStyle:before { /* creates the left part */ 
  9.     display:block
  10.     z-index:1
  11.     position:absolute
  12.     top:0
  13.     width50%
  14.     contentattr(data-content); /* dynamic content for the pseudo element */ 
  15.     overflow:hidden
  16.     pointer-events: none/* so the base char is selectable by mouse */ 
  17.     color#f00/* for demo purposes */ 
  18.     text-shadow2px -2px 0px #af0/* for demo purposes */ 
  19. .halfStyle:after { /* creates the right part */ 
  20.     display:block
  21.     directionrtl/* very important, will make the width to start from right */ 
  22.     position:absolute
  23.     z-index:2
  24.     top:0
  25.     left:50%
  26.     width50%
  27.     contentattr(data-content); /* dynamic content for the pseudo element */ 
  28.     overflow:hidden
  29.     pointer-events: none/* so the base char is selectable by mouse */ 
  30.     color#000/* for demo purposes */ 
  31.     text-shadow2px 2px 0px #0af/* for demo purposes */ 

你会发现,我们的实现方法可以很灵活,现在表象上是有三个字重叠,我们可以让每个字都各占1/3,这样,我得到一个三色字。上面这些例子都是左右分色,其实我们也可以让它上下分色或上中下分色。

免责声明:本文来源于网络,由网友提供或网络搜集,仅供个人交流学习参考使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。谢谢合作!

热门标签:

推荐阅读

 
 
咨询中心
优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博