纯css实现半字符艺术

css不仅是一门技术,还是一门艺术。css3的出现,给我们带来了更大的想象空间。今天带大家见识一下半字符的艺术。

paste image

你把爱分成了不同比例,谁又把多的那部分给占据;你把爱分成了不同比例,谁又把谁的那部分给占据。——易欣歌曲《分爱》

看到这张图,你有实现这个效果的思路吗?下面就教大家实现一个简单的半字符。

paste image

一、原理分析

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

二、实现代码

1
<span class="half" data-content="爱"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.half{
position:relative;
display:inline-block;
font-size:200px;
color: transparent;
/*overflow:hidden;*/
white-space: pre;
}
.half:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 60%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #f00;
}
.half:after {
display:block;
direction: rtl;
z-index:1;
position:absolute;
top:0;
right:-10px;
width: 40%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #00f;
}

其实就是加了个after,before和after的宽度比例不一样,本体设为透明。

三、拓展

左右半个字符都可以用伪元素生成,这样可以生成三部分,也就是一个文字可以实现三种颜色啦。这里要注意的一点是,after样式中要添加一句

1
direction: rtl;

这条语句保证宽度是从右边开始计算。

paste image

四、总结

别光看啊,赶快敲代码去试一试,体验css的艺术。
心有多大,江湖就有多大。我是竹风,关注我,一起探索前端的奥秘。

最后更新:

原始链接: http://wangzc.cc/blog/css-half-font/