如何使用CSS3实现字符的美化方法

小编给大家分享一下如何使用CSS3实现字符的美化方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年积累的成都网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有孟州免费网站建设让你可以放心的选择与我们合作。

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

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

CSS代码

.halfStyle{

position:relative;

display:inline-block;

font-size:80px;/*任何宽度都可以*/

color:black;/*任何颜色，或透明*/

overflow:hidden;

white-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代码

<p>单个字符</p>

<spanclass="halfStylelazy"data-content="风">风</span>

<spanclass="halfStylelazy"data-content="流">流</span>

<spanclass="halfStylelazy"data-content="倜">倜</span>

<spanclass="halfStylelazy"data-content="傥">傥</span>

<hr/>

<p>用脚本自动美化：</p>

<spanclass="textToHalfStylelazy">恋爱容易婚姻不易，且行且珍惜。</span>

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

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

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"data-content="'+chars[i]+'">'+chars[i]+'</span>';

}

//WritetoDOMonlyonce

$el.append(output);

});

});

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

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

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

CSS代码

.halfStyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-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，这样，我得到一个三色字。上面这些例子都是左右分色，其实我们也可以让它上下分色或上中下分色。

以上是“如何使用CSS3实现字符的美化方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前标题：如何使用CSS3实现字符的美化方法
分享地址：https://www.cdcxhl.com/article20/ipppjo.html

成都网站建设公司_创新互联，为您提供网站收录、云服务器、定制开发、软件开发、网站策划、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联