<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('');//分割字符串

css3 半个字符美化方法的更多相关文章

  1. HTML5----CSS显示半个字符

    CSS显示半个字符的基本思路: 就是一个字写两遍,分别显示一半.这里就须要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪"字,表明它本来 ...

  2. pure CSS3 实现三角形icon的方法

    pure CSS3 实现三角形icon的方法 border: color+transparent transform : rotate() /rotateZ() ? 使用 实体字符"◆&qu ...

  3. python购物&常用字符处理方法

    python 一个购物车的例子 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 '''购物车''' 4 5 goods = [ 6 7 {&quo ...

  4. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  5. Java中生成随机字符的方法总结

    package learnExercise; public class RandomCharacter { public static char getRandomCharacter(char ch1 ...

  6. JS删除String里某个字符的方法

    关于JS删除String里的字符的方法,一般使用replace()方法.但是这个方法只会删除一次,如果需要将string里的所以字符都删除就要用到正则. 1 2 3 4 var str = " ...

  7. php 截取字符串第一个字符，截取掉字符串最后一个字符的方法

    php 截取字符串第一个字符,php截取掉字符串最后一个字符的方法: $frist = substr( $c_url, 0, 1 ); $delete_last = substr(base_url() ...

  8. python文本 单独处理每个字符的方法汇总

    python文本 单独处理字符串每个字符的方法汇总 场景: 用每次处理一个字符的方式处理字符串 方法: 1.使用list(str) >>> a='abcdefg'    >&g ...

  9. JAVA中替换字符的方法replace和replaceAll 区别

    replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是:1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharSe ...

随机推荐

  1. python最简单的http服务器

    人生苦短,我用python 今天有个需求就是简单的把自己的图片通过web共享,自然就想起了使用服务器了,在python下使用一个简单的服务器是非常方便的,用到标准库里面的SimpleHTTPServe ...

  2. C语言中运算符的口决

  3. free store VS heap（自由存储区VS堆）

    1. free store VS heap free store (自由存储区)和 heap (堆),在C/C++中经常会遇到.他们是否有区别呢? 偶最早发现这两个概念性问题是在<Excepti ...

  4. Android学习系列(40)--Android主题和样式之系统篇（下）

    11)Widget样式(Widget Style) 特别说明,此处定义大量的系统内置控件的样式,对于重写原生控件的样式具有很大的参考价值. <!-- Widget styles --> & ...

  5. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

  6. 使用Gson排除特定字段

    http://blog.csdn.net/hknock/article/details/51037564

  7. Android Force Close的原因：

    1.程序空指针: 2.程序加载的资源找不到: 3.未加载布局文件时直接使用了对象: 4.后台service挂掉导致不可捕捉的ANR或crash: 5.Activity未在配置文件中注册.

  8. POJ1637 Sightseeing tour（判定混合图欧拉回路）

    有向连通图存在欧拉回路的充要条件是所有点入度=出度. 首先随便给定所有无向边一个方向(不妨直接是u->v方向),记录所有点的度(记:度=入度-出度). 这时如果有点的度不等于0,那么就不存在欧拉 ...

  9. nginx负载均衡之基于客户端cookie的会话保持

    通过ip_hash做会话保持有一定的缺陷,这个是通过客户端ip来实现.同一个网络下众多客户端访问服务器会被扔到同一台机器,再或者是CDN也 会导致负载不均衡.所以要实现通过客户端cookie实现,包括 ...

  10. 【python游戏编程之旅】第六篇---pygame中的Sprite（精灵）模块和加载动画

    本系列博客介绍以python+pygame库进行小游戏的开发.有写的不对之处还望各位海涵. 直到现在我们已经学了很多pygame基础知识了,从这篇博客开始我们将会学习pygame中高级部分,更多和精灵 ...