巧妙的运用CSS3美化半个字符的方法

css不仅是一种技术，也是一种艺术，如果你运用的好，可以用它创造出各种神奇的效果，随着现代浏览器技术的进步，css3的革新，也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形，比如在这个“html5技术秀：你的3d立体旋转名字”最近网上热炒的一个话题是如何用css美化半个字符。就是把一个字符劈成两半，一半是a样式，一半是b样式。
css美化半个字符的基本思路
思路很简单，就是一个字写两遍，分别显示一半。思路很清楚，也很简单，但如何实现呢？当然不能真的把一个字写两遍，这样也太愚蠢了，而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到css伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。css代码
.halfstyle { position:relative; display:inline-block; font-size:80px; /* 任何宽度都可以 */ color: black; /* 任何颜色，或透明 */ overflow:hidden; white-space: pre; /* 处理空格 */}.halfstyle:before { display:block; z-index:1; position:absolute; top:0; left:0; width: 50%; content: attr(data-content); /* 伪元素的动态获取内容 */ overflow:hidden; color: #f00;}html代码
单个字符p>风span>流span>倜span>傥span>
用脚本自动美化：p>
恋爱容易婚姻不易，且行且珍惜。span>需要做的就是将.halfstylecss类应用到每个需要半边美化的字符上。在上面的代码示例中，每个span里都包含了一个字符，我们在上面放置了data-属性，例如data-content=风，之后在伪元素里我们使用了attr(data-content)方法，这样.halfstyle:before就会变得动态，不需要你手工的硬编码它们的内容。对于多个字符需要美化的情况，我们可以创建一段jquery代码自动将所有有.texttohalfstylecss类字符添加这种效果：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 $el.html('' + text + '');
// reset output for appending output = '';
// iterate over all chars in the text for (i = 0; i ' + chars[i] + ''; }
// write to dom only once $el.append(output); });});这样，不论是一段文字还是整篇文字，我们都能一次搞定，不必手工一个一个的设置，也不必一个一个的做图！高级做法：左右半个字符都用伪元素生成
上面我们的做法中，文字的左半边是用:before伪元素生成的，而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用:after实现。css代码


网站专业设计要求和技术之经验谈
60个Chrome浏览器神器插件大收集
高大上的熊掌号搜索名片怎么设置呢
上海公司网站建设:网络推广什么方法才能做好
搜索关键词企业网站在搜索引擎排名靠前的关键方法
网站外链建设的渠道有哪些？
轻松解决网站优化，关于网站优化的四种方法
现在SEO需要准备很长时间