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

小编给大家分享一下如何使用CSS3实现字符的美化方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
　　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代码
　　单个字符
　　风
　　流
　　倜
　　傥
　　
　　用脚本自动美化：
　　恋爱容易婚姻不易，且行且珍惜。
　　需要做的就是将.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(‘
　　‘
　　+text+”
　　);
　　//Resetoutputforappending
　　output=”;
　　//Iterateoverallcharsinthetext
　　for(i=0;i

　　//Createastyledelementforeachcharacterandappendtocontainer

　　output+=’‘+chars[i]+”;

　　}

　　//WritetoDOMonlyonce

　　$el.append(output);

　　});

　　});

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

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

　　上面我们的做法中，文字的左半边是用:before伪元素生成的，而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用: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;

　　poi免费云主机、域名nter-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实现字符的美化方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

　　//Createastyledelementforeachcharacterandappendtocontainer
　　output+=’‘+chars[i]+”;
　　}
　　//WritetoDOMonlyonce
　　$el.append(output);
　　});
　　});
　　这样，不论是一段文字还是整篇文字，我们都能一次搞定，不必手工一个一个的设置，也不必一个一个的做图！
　　高级做法：左右半个字符都用伪元素生成
　　上面我们的做法中，文字的左半边是用:before伪元素生成的，而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用: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实现字符的美化方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: 如何掌握JVM内存调优

本篇内容介绍了“如何掌握JVM内存调优”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！会对整个堆进行整理，包括Young、Tenured和Perm。Full GC…