css3绘制三色字

涉及的知识：

　　1.伪类before，after --> 添加在对应元素内容(innerHtml)中的最前面，最后面

　　 content:attr() 获取元素属性， content:url()载入url对应的元素，data-*用于保存数据的属性

　　2.jQuery(callback)相当于$(document).ready(callback);

　　3.each(callback(index,element)) --> 遍历元素 index -- 索引 element -- 元素

　　4.text() --> 获取或设置元素的innerText

　　5.split() --> 分隔字符串，可以使用字符串，或正则表达式作为分隔原则

　　6.html() --> 获取或设置元素的innerHtml

　　7.append() --> 在元素的子元素最后添加节点

　　8.!important --> 设置css属性优先级最高

　　9.clip:rect(top,right,bottom,left) --> 按照top,right,bottom,left表示的位置划线（top,bottom都由上面开始数，right,left都由左边开始数），四条线围着的区域是剩余区

　　10.white-space:

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

　　代码：

<!doctype html>
<html>
<head>
    <meta charset = "utf-8" />
    <script src = "jquery-3.2.1.min.js"></script>
    <style>
        .halfStyle{
            position: relative;
            display: inline-block;
            font-size: 80px; /*任何宽度都可以*/
            color: black; /*任何颜色，或透明*/
            overflow: hidden;
            white-space: pre; /*如pre标签，保留空格*/
        }
        .halfStyle:before{
            display: block;
            z-index: 2; /*设置在最上层*/
            position: absolute;
            top: 0;
            left: 0;
            height: 33.3%; /*容器是.halfStyle*/ /*用width则可以使方向为左中右*/
            content: attr(data-content); /*伪元素的动态获取内容*/
            overflow: hidden;
            color: #f00;
        }
        .halfStyle:after{
            display: block;
            z-index: 1; /*设置在中间层*/
            position: absolute;
            top: 0;
            left: 0;
            height: 66.6%;
            content: attr(data-content); /*伪元素的动态获取内容*/
            overflow: hidden;
            color: #eee;
        }
    </style>    
</head>

<body>
    <p>单个字符</p>
    <span class = "halfStyle lazy" data-content = "风"><span>风</span></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>
    
    <script>
    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 :相当于隐藏了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 class = "halfStyle lazy" aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});
    </script>
</body>

</html>

结果：

　　资料来源：https://www.html5tricks.com/css3-half-character.html