最近網(wǎng)上熱炒的一個(gè)話題是如何用CSS美化半個(gè)字符。就是把一個(gè)字符劈成兩半，一半是A樣式，一半是B樣式。當(dāng)然，大家都知道，不論是中文字符還是西文字符，單個(gè)字符否是無(wú)法拆分的，它們是文字的最新單元，如果是美化半個(gè)詞或半個(gè)句子，這估計(jì)大家都知道如何做，也很常見。但半個(gè)字符如何美化呢？當(dāng)然有辦法，這里需要的就是藝術(shù)。
先看看需要的效果圖。
左邊是一種顏色，右邊是一種顏色。如果是用圖片做，這當(dāng)然很容易，但圖片有圖片的局限性，比如不能動(dòng)態(tài)的生成字符樣式。下面我們就來(lái)看看用純CSS如何實(shí)現(xiàn)這樣的效果。
CSS美化半個(gè)字符的基本思路
思路很簡(jiǎn)單，就是一個(gè)字寫兩遍，分別顯示一半。思路很清楚，也很簡(jiǎn)單，但如何實(shí)現(xiàn)呢？當(dāng)然不能真的把一個(gè)字寫兩遍，這樣也太愚蠢了，而且當(dāng)用戶拷貝粘貼這段文字時(shí)會(huì)粘出同樣的文字兩份。這里就需要用到CSS偽元素:before和:after，記住這個(gè)“偽元素”的“偽”字，表明它本來(lái)是不存在的。我們的方法就是在偽元素里放置相同的字符，只顯示半個(gè)，而原字符顯示另外一半，最后把它們拼成一個(gè)字。
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); /* 偽元素的動(dòng)態(tài)獲取內(nèi)容 */
overflow:hidden;
color: #f00;
}HTML代碼
<p>單個(gè)字符</p> <span class="halfStyle lazy " data-content="風(fēng)">風(fēng)</span> <span class="halfStyle lazy " data-content="流">流</span> <span class="halfStyle lazy " data-content="倜">倜</span> <span class="halfStyle lazy " data-content="儻">儻</span> <hr/> <p>用腳本自動(dòng)美化：</p> <span class="textToHalfStyle lazy ">戀愛容易婚姻不易，且行且珍惜。</span>
需要做的就是將 .halfStyle CSS類應(yīng)用到每個(gè)需要半邊美化的字符上。在上面的代碼示例中，每個(gè)span里都包含了一個(gè)字符，我們?cè)谏厦娣胖昧?code>data-屬性，例如data-content="風(fēng)"，之后在偽元素里我們使用了attr(data-content)方法，這樣.halfStyle:before就會(huì)變得動(dòng)態(tài)，不需要你手工的硬編碼它們的內(nèi)容。
對(duì)于多個(gè)字符需要美化的情況，我們可以創(chuàng)建一段jQuery代碼自動(dòng)將所有有.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('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
// 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 += '<span aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}
// Write to DOM only once
$el.append(output);
});
});這樣，不論是一段文字還是整篇文字，我們都能一次搞定，不必手工一個(gè)一個(gè)的設(shè)置，也不必一個(gè)一個(gè)的做圖！
高級(jí)做法：左右半個(gè)字符都用偽元素生成
上面我們的做法中，文字的左半邊是用:before偽元素生成的，而右半邊使用的是原文字。但實(shí)際上我們可以將左右兩邊都用偽元素生成——右半邊用:after實(shí)現(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 */
}你會(huì)發(fā)現(xiàn)，我們的實(shí)現(xiàn)方法可以很靈活，現(xiàn)在表象上是有三個(gè)字重疊，我們可以讓每個(gè)字都各占1/3，這樣，我得到一個(gè)三色字。上面這些例子都是左右分色，其實(shí)我們也可以讓它上下分色或上中下分色。
作為Web程序員，只有我們用于探索和創(chuàng)新，有很多任務(wù)我們都可以用更簡(jiǎn)單，更方便的方法完成。
