CSS3實作字元的美化方法

CSS不僅是一種技術，也是一種藝術，如果你運用的好，可以用它創造出各種神奇的效果，隨著現代瀏覽器技術的進步，CSS3的革新，也給了程式設計師更大的空間和可能性來發揮自己的奇思妙想。那麼如何用CSS美化半個字元。其實就是把一個字元劈成兩半，一半是A樣式，一半是B樣式。當然，大家都知道，不論是中文字符還是西文字符，單個字符否是無法拆分的，它們是文字的最新單元，如果是美化半個詞或半個句子，這估計大家都知道如何做，也很常見。但半個字符如何美化呢？當然有辦法，這裡需要的就是藝術。

先看看需要的效果圖：

左邊是一種顏色，右邊是一種顏色。如果是用圖片做，這當然很容易，但圖片有圖片的局限性，例如不能動態的生成字元樣式。下面我們就來看看用純CSS如何達到這樣的效果。

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>
<span class="halfStyle lazy " data-content="风">风</span>
<span class="halfStyle lazy " data-content="流">流</span>
<span class="halfStyle lazy " data-content="倜">倜</span>
<span class="halfStyle lazy " data-content="傥">傥</span>

<hr/>
<p>用脚本自动美化：</p>

<span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span>

需要做的就是將.halfStyleCSS類別套用到每個需要半邊美化的字元上。在上面的程式碼範例中，每個span裡都包含了一個字符，我們在上面放置了data-屬性，例如data-content="風"，之後在偽元素裡我們使用了attr(data-content)方法，這樣.halfStyle:before就會變得動態，不需要你手工的硬編碼它們的內容。

對於多個字元需要美化的情況，我們可以建立一段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('
        <span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">&#39; 
        + text + &#39;</span>&#39;
        );

        // Reset output for appending
        output = &#39;&#39;;

        // 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 += &#39;<span aria-hidden="true" data-content="&#39; + chars[i] + &#39;">&#39; + chars[i] + &#39;</span>&#39;;
        }

        // Write to DOM only once
        $el.append(output);
    });
});

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

高階做法：左右半個字元都用偽元素產生

上面我們的做法中，文字的左半邊是用:before偽元素產生的，而右半邊使用的是原文字。但實際上我們可以將左右兩邊都用偽元素生成－右半邊用:after實作。

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 */
}

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

作為Web程式設計師也是如此，只有我們用來探索和創新，有很多任務我們都可以用更簡單，更方便的方法完成。你有此同感嗎？

以上是CSS3實作字元的美化方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！