CSS美化半个字符的巧妙方法

你觉得你过不去的坎的时候，有一天也会乐观的和别人分享。或许这就是成长。有时候，闭上眼睛，放下骄傲，承认是自己错了，不是认输，而是成长。

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

先看看需要的效果图。

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

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

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

CSS代码

CSS Code复制内容到剪贴板

.halfStyle{
position:relative;
display:inline-block;
font-size:80px;/*任何宽度都可以*/
color:black;/*任何颜色，或透明*/
overflow:hidden;
whitewhite-space:pre;/*处理空格*/
}
.halfStyle:before{
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width:50%;
content:attr(data-content);/*伪元素的动态获取内容*/
overflow:hidden;
color:#f00;
}

HTML代码

XML/HTML Code复制内容到剪贴板

单个字符
<spanclass="halfStyle"data-content="风">风
<spanclass="halfStyle"data-content="流">流
<spanclass="halfStyle"data-content="倜">倜
<spanclass="halfStyle"data-content="傥">傥
<hr/>
用脚本自动美化：
<spanclass="textToHalfStyle">恋爱容易婚姻不易，且行且珍惜。

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

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

JavaScript Code复制内容到剪贴板

jQuery(function($){
vartext,chars,$el,i,output;
//遍历所有字符
$('.textToHalfStyle').each(function(idx,el){
$el=$(el);
text=$el.text();
chars=text.split('');
//Setthescreen-readertext
$el.html('<spanstyle="position:absolute!important;clip:rect(1px1px1px1px);clip:rect(1px,1px,1px,1px);">'+text+'');
//Resetoutputforappending
output='';
//Iterateoverallcharsinthetext
for(i=0;i<chars.length;i++){
//Createastyledelementforeachcharacterandappendtocontainer
output+='<spanaria-hidden="true"class="halfStyle"data-content="'+chars[i]+'">'+chars[i]+'';
}
//WritetoDOMonlyonce
$el.append(output);
});
});

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

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

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

CSS代码

CSS Code复制内容到剪贴板

.halfStyle{
position:relative;
display:inline-block;
font-size:80px;/*oranyfontsizewillwork*/
color:transparent;/*hidethebasecharacter*/
overflow:hidden;
whitewhite-space:pre;/*topreservethespacesfromcollapsing*/
}
.halfStyle:before{/*createstheleftpart*/
display:block;
z-index:1;
position:absolute;
top:0;
width:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#f00;/*fordemopurposes*/
text-shadow:2px-2px0px#af0;/*fordemopurposes*/
}
.halfStyle:after{/*createstherightpart*/
display:block;
direction:rtl;/*veryimportant,willmakethewidthtostartfromright*/
position:absolute;
z-index:2;
top:0;
left:50%;
width:50%;
content:attr(data-content);/*dynamiccontentforthepseudoelement*/
overflow:hidden;
pointer-events:none;/*sothebasecharisselectablebymouse*/
color:#000;/*fordemopurposes*/
text-shadow:2px2px0px#0af;/*fordemopurposes*/
}

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

想起了电影《卧虎藏龙》了的一句话，“心有多大，江湖就有多大”，作为Web程序员也是如此，只有我们用于探索和创新，有很多任务我们都可以用更简单，更方便的方法完成。你有此同感吗？

到此这篇关于CSS美化半个字符的巧妙方法就介绍到这了。只有依靠你自己和你自己的能力来保卫，才是最可靠的、有把握的和持久的。更多相关CSS美化半个字符的巧妙方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

全站频道

大家都在搜索：