<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.halfStyle {
position:relative;
display:inline-block;
font-size:5em; /* 任何宽度都可以 */
color: black; /* 任何颜色，或透明 */
overflow:hidden;
white-space: pre; /* 处理空格 */
color: #9966ff;
}
.halfStyle:before {
display:block;
z-index:2;
position:absolute;
top:0;
left:0;
width: 33%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #ff6666;
}
.halfStyle:after{
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 66%;
content: attr(data-content); /* 伪元素的动态获取内容 */
overflow:hidden;
color: #FF6699;
}
</style> </head>
<body>
<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> <script type="text/javascript">
$(function($) {
var text, chars, $el, i, output; // 遍历所有字符
$('.textToHalfStyle').each(function(idx, el) {
$el = $(el);
text = $el.text();
chars = text.split('');//分割字符串
//alert(chars)
// 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>');
alert(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 += '<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>
新知识：
white-space: pre; /* 处理空格 */
content: attr(data-content); /* 伪元素的动态获取内容 */
chars = text.split('');//分割字符串
