如何使用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代碼

　　<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實現字符的美化方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！