如何用CSS3美化半個字符巧妙方法

CSS不僅是一種技術(shù)，也是一種藝術(shù)，如果你運用的好，可以用它創(chuàng)造出各種神奇的效果，隨著現(xiàn)代瀏覽器技術(shù)的進步，CSS3的革新，也給了程序員更大的空間和可能性來發(fā)揮自己的奇思妙想。在網(wǎng)上有很多常見的圖形，比如在這個“HTML5技術(shù)秀：你的3D立體旋轉(zhuǎn)名字”作品里，在左上角的菜單前面都有一個小圖標，放在凡人眼里，它們肯定是個圖片，找美工做個圖，又省事，又快捷，但如果你仔細研究就會發(fā)現(xiàn)，它們不是圖片， 是用純CSS畫出來的，只有有藝術(shù)感的Web程序員才能做出這樣的事情。 最近網(wǎng)上熱炒的一個話題是如何用CSS美化半個字符。就是把一個字符劈成兩半，一半是A樣式，一半是B樣式。當然，大家都知道，不論是中文字符還是西文字符，單個字符否是無法拆分的，它們是文字的最新單元，如果是美化半個詞或半個句子，這估計大家都知道如何做，也很常見。但半個字符如何美化呢？當然有辦法，這里需要的就是藝術(shù)。 先看看需要的效果圖。

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

思路很簡單，就是一個字寫兩遍，分別顯示一半。思路很清楚，也很簡單，但如何實現(xiàn)呢？當然不能真的把一個字寫兩遍，這樣也太愚蠢了，而且當用戶拷貝粘貼這段文字時會粘出同樣的文字兩份。這里就需要用到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); /* 偽元素的動態(tài)獲取內(nèi)容 */ overflow:hidden; color: #f00; } HTML代碼

單個字符p> 風span> 流span> 倜span> 儻span>

---

用腳本自動美化：p>

戀愛容易婚姻不易，且行且珍惜。span> 需要做的就是將.halfStyleCSS類應(yīng)用到每個需要半邊美化的字符上。在上面的代碼示例中，每個span里都包含了一個字符，我們在上面放置了data-屬性，例如data-content="風"，之后在偽元素里我們使用了attr(data-content)方法，這樣.halfStyle:before就會變得動態(tài)，不需要你手工的硬編碼它們的內(nèi)容。 對于多個字符需要美化的情況，我們可以創(chuàng)建一段jQuery代碼自動將所有有.textToHalfStyleCSS類字符添加這種效果： jQuery(function($) { var text, chars, $el, i, output;

// 遍歷所有字符 $('.textToHalfStyle').each(function(idx, el) { $el = $(el); text = $el.text(); chars = text.split('');

// Set the screen-reader text $el.html('' + text + '');

// Reset output for appending output = '';

// Iterate over all chars in the text for (i = 0; i < chars.length; i++) { // Create a styled element for each character and append to container output += '+ chars[i] + '">' + chars[i] + ''; }

// Write to DOM only once $el.append(output); }); }); 這樣，不論是一段文字還是整篇文字，我們都能一次搞定，不必手工一個一個的設(shè)置，也不必一個一個的做圖！ 高級做法：左右半個字符都用偽元素生成

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

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the left part */ display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the right part */ display:block; direction: rtl; /* very important, will make the width to start from right */ position:absolute; z-index:2; top:0; left:50%; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁題目：如何用CSS3美化半個字符巧妙方法
URL地址：http://muchs.cn/news29/321929.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站設(shè)計、網(wǎng)站維護、網(wǎng)站收錄、建站公司、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)