亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2016-06-14 15:37:55   作者：佚名   我要評論
CSS不僅是一種技術(shù)，也是一種藝術(shù)，如果你運用的好，可以用它創(chuàng)造出各種神奇的效果，隨著現(xiàn)代瀏覽器技術(shù)的進步，CSS3的革新，也給了程序員更大的空間和可能性來發(fā)揮自己的奇思妙想。

最近網(wǎng)上熱炒的一個話題是如何用CSS美化半個字符。就是把一個字符劈成兩半，一半是A樣式，一半是B樣式。當(dāng)然，大家都知道，不論是中文字符還是西文字符，單個字符否是無法拆分的，它們是文字的最新單元，如果是美化半個詞或半個句子，這估計大家都知道如何做，也很常見。但半個字符如何美化呢？當(dāng)然有辦法，這里需要的就是藝術(shù)。

先看看需要的效果圖。


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

左邊是一種顏色，右邊是一種顏色。如果是用圖片做，這當(dāng)然很容易，但圖片有圖片的局限性，比如不能動態(tài)的生成字符樣式。下面我們就來看看用純CSS如何實現(xiàn)這樣的效果。
CSS美化半個字符的基本思路

思路很簡單，就是一個字寫兩遍，分別顯示一半。思路很清楚，也很簡單，但如何實現(xiàn)呢？當(dāng)然不能真的把一個字寫兩遍，這樣也太愚蠢了，而且當(dāng)用戶拷貝粘貼這段文字時會粘出同樣的文字兩份。這里就需要用到CSS偽元素:before和:after，記住這個“偽元素”的“偽”字，表明它本來是不存在的。我們的方法就是在偽元素里放置相同的字符，只顯示半個，而原字符顯示另外一半，最后把它們拼成一個字。

CSS代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .halfStyle {   
  2.     position:relative;   
  3.     display:inline-block;   
  4.     font-size:80px; /*  任何寬度都可以 */  
  5.     color: black; /* 任何顏色，或透明 */  
  6.     overflow:hidden;   
  7.     whitewhite-space: pre; /* 處理空格 */  
  8. }   
  9. .halfStyle:before {   
  10.     display:block;   
  11.     z-index:1;   
  12.     position:absolute;   
  13.     top:0;   
  14.     left:0;   
  15.     width: 50%;   
  16.     content: attr(data-content); /* 偽元素的動態(tài)獲取內(nèi)容 */  
  17.     overflow:hidden;   
  18.     color: #f00;   
  19. }  

HTML代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <p>單個字符</p>  
  2. <span class="halfStyle" data-content="風(fēng)">風(fēng)</span>  
  3. <span class="halfStyle" data-content="流">流</span>  
  4. <span class="halfStyle" data-content="倜">倜</span>  
  5. <span class="halfStyle" data-content="儻">儻</span>  
  6.   
  7. <hr/>  
  8. <p>用腳本自動美化：</p>  
  9.   
  10. <span class="textToHalfStyle">戀愛容易婚姻不易，且行且珍惜。</span>  
  11.   

需要做的就是將.halfStyleCSS類應(yīng)用到每個需要半邊美化的字符上。在上面的代碼示例中，每個span里都包含了一個字符，我們在上面放置了data-屬性，例如data-content="風(fēng)"，之后在偽元素里我們使用了attr(data-content)方法，這樣.halfStyle:before就會變得動態(tài)，不需要你手工的硬編碼它們的內(nèi)容。

對于多個字符需要美化的情況，我們可以創(chuàng)建一段jQuery代碼自動將所有有.textToHalfStyleCSS類字符添加這種效果：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. jQuery(function($) {   
  2.     var text, chars, $el, i, output;   
  3.   
  4.     // 遍歷所有字符   
  5.     $('.textToHalfStyle').each(function(idx, el) {   
  6.         $el = $(el);   
  7.         text = $el.text();   
  8.         chars = text.split('');   
  9.   
  10.         // Set the screen-reader text   
  11.         $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');   
  12.   
  13.         // Reset output for appending   
  14.         output = '';   
  15.   
  16.         // Iterate over all chars in the text   
  17.         for (i = 0; i < chars.length; i++) {   
  18.             // Create a styled element for each character and append to container   
  19.             output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';   
  20.         }   
  21.   
  22.         // Write to DOM only once   
  23.         $el.append(output);   
  24.     });   
  25. });   
  26.   

這樣，不論是一段文字還是整篇文字，我們都能一次搞定，不必手工一個一個的設(shè)置，也不必一個一個的做圖！

高級做法：左右半個字符都用偽元素生成

上面我們的做法中，文字的左半邊是用:before偽元素生成的，而右半邊使用的是原文字。但實際上我們可以將左右兩邊都用偽元素生成——右半邊用:after實現(xiàn)。

CSS代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .halfStyle {   
  2.     position:relative;   
  3.     display:inline-block;   
  4.     font-size:80px; /* or any font size will work */  
  5.     color: transparent; /* hide the base character */  
  6.     overflow:hidden;   
  7.     whitewhite-space: pre; /* to preserve the spaces from collapsing */  
  8. }   
  9. .halfStyle:before { /* creates the left part */  
  10.     display:block;   
  11.     z-index:1;   
  12.     position:absolute;   
  13.     top:0;   
  14.     width: 50%;   
  15.     content: attr(data-content); /* dynamic content for the pseudo element */  
  16.     overflow:hidden;   
  17.     pointer-events: none; /* so the base char is selectable by mouse */  
  18.     color: #f00; /* for demo purposes */  
  19.     text-shadow: 2px -2px 0px #af0; /* for demo purposes */  
  20. }   
  21. .halfStyle:after { /* creates the right part */  
  22.     display:block;   
  23.     direction: rtl; /* very important, will make the width to start from right */  
  24.     position:absolute;   
  25.     z-index:2;   
  26.     top:0;   
  27.     left:50%;   
  28.     width: 50%;   
  29.     content: attr(data-content); /* dynamic content for the pseudo element */  
  30.     overflow:hidden;   
  31.     pointer-events: none; /* so the base char is selectable by mouse */  
  32.     color: #000; /* for demo purposes */  
  33.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */  
  34. }  

你會發(fā)現(xiàn)，我們的實現(xiàn)方法可以很靈活，現(xiàn)在表象上是有三個字重疊，我們可以讓每個字都各占1/3，這樣，我得到一個三色字。上面這些例子都是左右分色，其實我們也可以讓它上下分色或上中下分色。

想起了電影《臥虎藏龍》了的一句話，“心有多大，江湖就有多大”，作為Web程序員也是如此，只有我們用于探索和創(chuàng)新，有很多任務(wù)我們都可以用更簡單，更方便的方法完成。你有此同感嗎？

相關(guān)文章

最新評論