css3教程 用CSS3美化半个字符巧妙方法

栏目分类：网页设计    发布日期：2017-07-11    浏览次数：4276次     收藏

CSS不仅是一种技术，也是一种艺术，如果你运用的好，可以用它创造出各种神奇的效果，随着现代浏览器技术的进步，CSS3的革新，也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形，比如在这个“HTML5技术秀：你的3D立体旋转名字”作品里，在左上角的菜单前面都有一个小图标，放在凡人眼里，它们肯定是个图片，找美工做个图，又省事，又快捷，但如果你仔细研究就会发现，它们不是图片， 是用纯CSS画出来的，只有有艺术感的Web程序员才能做出这样的事情。

最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半，一半是A样式，一半是B样式。当然，大家都知道，不论是中文字符还是 西文字符，单个字符否是无法拆分的，它们是文字的最新单元，如果是美化半个词或半个句子，这估计大家都知道如何做，也很常见。但半个字符如何美化呢？当然 有办法，这里需要的就是艺术。

先看看需要的效果图。
 

 

左边是一种颜色，右边是一种颜色。如果是用图片做，这当然很容易，但图片有图片的局限性，比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。
 

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

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

CSS代码

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

HTML代码

1. <p>单个字符