首页客户案例高端网站建设SEO优化小程序开发APP定制开发关于动态联系咨询【>2 新版官网】

如何用CSS3美化半个字符巧妙方法

CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形,比如在这个“HTML5技术秀:你的3D立体旋转名字”作品里,在左上角的菜单前面都有一个小图标,放在凡人眼里,它们肯定是个图片,找美工做个图,又省事,又快捷,但如果你仔细研究就会发现,它们不是图片, 是用纯CSS画出来的,只有有艺术感的Web程序员才能做出这样的事情。 最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半,一半是A样式,一半是B样式。当然,大家都知道,不论是中文字符还是西文字符,单个字符否是无法拆分的,它们是文字的最新单元,如果是美化半个词或半个句子,这估计大家都知道如何做,也很常见。但半个字符如何美化呢?当然有办法,这里需要的就是艺术。 先看看需要的效果图。

左边是一种颜色,右边是一种颜色。如果是用图片做,这当然很容易,但图片有图片的局限性,比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。 观看演示 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.length; i++) { // Create a styled element for each character and append to container output += '+ chars[i] + '">' + chars[i] + ''; }

// Write to DOM only once $el.append(output); }); }); 这样,不论是一段文字还是整篇文字,我们都能一次搞定,不必手工一个一个的设置,也不必一个一个的做图! 高级做法:左右半个字符都用伪元素生成

上面我们的做法中,文字的左半边是用:before伪元素生成的,而右半边使用的是原文字。但实际上我们可以将左右两边都用伪元素生成——右半边用:after实现。 CSS代码

.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the left part */ display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the right part */ display:block; direction: rtl; /* very important, will make the width to start from right */ position:absolute; z-index:2; top:0; left:50%; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } 本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

日期:2015年05月31日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
线上服务咨询微信二维码15876521776免费获取诊断报告