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

时间:2021-05-08

最近网上热炒的一个话题是如何用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复制内容到剪贴板
  • <p>单个字符</p>
  • <spanclass="halfStyle"data-content="风">风</span>
  • <spanclass="halfStyle"data-content="流">流</span>
  • <spanclass="halfStyle"data-content="倜">倜</span>
  • <spanclass="halfStyle"data-content="傥">傥</span>
  • <hr/>
  • <p>用脚本自动美化:</p>
  • <spanclass="textToHalfStyle">恋爱容易婚姻不易,且行且珍惜。</span>
  • 需要做的就是将.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+'</span>');
  • //Resetoutputforappending
  • output='';
  • //Iterateoverallcharsinthetext
  • for(i=0;i<chars.length;i++){
  • //Createastyledelementforeachcharacterandappendtocontainer
  • output+='<spanaria-hidden="true"class="halfStyle"data-content="'+chars[i]+'">'+chars[i]+'</span>';
  • }
  • //WritetoDOMonlyonce
  • $el.append(output);
  • });
  • });
  • 这样,不论是一段文字还是整篇文字,我们都能一次搞定,不必手工一个一个的设置,也不必一个一个的做图!

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

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

    CSS代码

    CSS Code复制内容到剪贴板
  • .halfStyle{
  • position:relative;
  • display:inline-block;
  • font-size:80px;
  • color:transparent;
  • overflow:hidden;
  • whitewhite-space:pre;
  • }
  • .halfStyle:before{
  • display:block;
  • z-index:1;
  • position:absolute;
  • top:0;
  • width:50%;
  • content:attr(data-content);
  • overflow:hidden;
  • pointer-events:none;
  • color:#f00;
  • text-shadow:2px-2px0px#af0;
  • }
  • .halfStyle:after{
  • display:block;
  • direction:rtl;
  • position:absolute;
  • z-index:2;
  • top:0;
  • left:50%;
  • width:50%;
  • content:attr(data-content);
  • overflow:hidden;
  • pointer-events:none;
  • color:#000;
  • text-shadow:2px2px0px#0af;
  • }
  • 你会发现,我们的实现方法可以很灵活,现在表象上是有三个字重叠,我们可以让每个字都各占1/3,这样,我得到一个三色字。上面这些例子都是左右分色,其实我们也可以让它上下分色或上中下分色。

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章