首页 > 代码库 > css3 半个字符美化方法
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 text64 $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 appending68 output = ‘‘;69 70 // Iterate over all chars in the text71 for (i = 0; i < chars.length; i++) {72 // Create a styled element for each character and append to container73 output += ‘<span class="halfStyle lazy " aria-hidden="true" data-content="‘ + chars[i] + ‘">‘ + chars[i] + ‘</span>‘;74 }75 76 // Write to DOM only once77 $el.append(output);78 });79 });80 </script>81 </body>82 </html>
新知识：
white-space: pre; /* 处理空格 */
content: attr(data-content); /* 伪元素的动态获取内容 */
chars = text.split(‘‘);//分割字符串
css3 半个字符美化方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。