css3 半个字符美化方法
1 <html lang="zh-CN"> 2 <head> 3 <title></title> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> 6 <style type="text/css"> 7 .halfStyle { 8 position:relative; 9 display:inline-block; 10 font-size:5em; /* 任何宽度都可以 */ 11 color: black; /* 任何颜色，或透明 */ 12 overflow:hidden; 13 white-space: pre; /* 处理空格 */ 14 color: #9966ff; 15 } 16 .halfStyle:before { 17 display:block; 18 z-index:2; 19 position:absolute; 20 top:0; 21 left:0; 22 width: 33%; 23 content: attr(data-content); /* 伪元素的动态获取内容 */ 24 overflow:hidden; 25 color: #ff6666; 26 } 27 .halfStyle:after{ 28 display:block; 29 z-index:1; 30 position:absolute; 31 top:0; 32 left:0; 33 width: 66%; 34 content: attr(data-content); /* 伪元素的动态获取内容 */ 35 overflow:hidden; 36 color: #FF6699; 37 } 38 </style> 39 40 </head> 41 <body> 42 <p>单个字符</p> 43 <span class="halfStyle lazy " data-content="风">风</span> 44 <span class="halfStyle lazy " data-content="流">流</span> 45 <span class="halfStyle lazy " data-content="倜">倜</span> 46 <span class="halfStyle lazy " data-content="傥">傥</span> 47 48 <hr/> 49 <p>用脚本自动美化：</p> 50 51 <span class="textToHalfStyle lazy ">恋爱容易婚姻不易，且行且珍惜。</span> 52 53 <script type="text/javascript"> 54 $(function($) { 55 var text, chars, $el, i, output; 56 57 // 遍历所有字符 58 $('.textToHalfStyle').each(function(idx, el) { 59 $el = $(el); 60 text = $el.text(); 61 chars = text.split('');//分割字符串 62 //alert(chars) 63 // Set the screen-reader text 64 $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>'); 65 alert(text); 66 67 // Reset output for appending 68 output = ''; 69 70 // Iterate over all chars in the text 71 for (i = 0; i < chars.length; i++) { 72 // Create a styled element for each character and append to container 73 output += '<span class="halfStyle lazy " aria-hidden="true" data-content="' + chars[i] + '">' + chars[i] + '</span>'; 74 } 75 76 // Write to DOM only once 77 $el.append(output); 78 }); 79 }); 80 </script> 81 </body> 82 </html>
新知识：
white-space: pre; /* 处理空格 */
content: attr(data-content); /* 伪元素的动态获取内容 */
chars = text.split('');//分割字符串
