CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 用CSS美化半个字符巧妙方法

用CSS美化半个字符巧妙方法

      CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙想。在网上有很多常见的图形,比如在这个“HTML5技术秀:你的3D立体旋转名字”作品里,在左上角的菜单前面都有一个小图标,放在凡人眼里,它们肯定是个图片,找美工做个图,又省事,又快捷,但如果你仔细研究就会发现,它们不是图片, 是用纯CSS画出来的,只有有艺术感的Web程序员才能做出这样的事情。


       最近网上热炒的一个话题是如何用CSS美化半个字符。就是把一个字符劈成两半,一半是A样式,一半是B样式。当然,大家都知道,不论是中文字符还是西文字符,单个字符否是无法拆分的,它们是文字的最新单元,如果是美化半个词或半个句子,这估计大家都知道如何做,也很常见。但半个字符如何美化呢?当然有办法,这里需要的就是艺术。


先看看需要的效果图。




       左边是一种颜色,右边是一种颜色。如果是用图片做,这当然很容易,但图片有图片的局限性,比如不能动态的生成字符样式。下面我们就来看看用纯CSS如何实现这样的效果。


观看演示


CSS美化半个字符的基本思路


        思路很简单,就是一个字写两遍,分别显示一半。思路很清楚,也很简单,但如何实现呢?当然不能真的把一个字写两遍,这样也太愚蠢了,而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到CSS伪元素:before和:after,记住这个“伪元素”的“伪”字,表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字。


CSS代码


  1. .halfStyle {
  2.     position:relative;
  3.     display:inline-block;
  4.     font-size:80px; /*  任何宽度都可以 */
  5.     color: black; /* 任何颜色,或透明 */
  6.     overflow:hidden;
  7.     white-space: pre; /* 处理空格 */
  8. }
  9. .halfStyle:before {
  10.     display:block;
  11.     z-index:1;
  12.     position:absolute;
  13.     top:0;
  14.     left:0;
  15.     width: 50%;
  16.     content: attr(data-content); /* 伪元素的动态获取内容 */
  17.     overflow:hidden;
  18.     color: #f00;
  19. }
复制代码
HTML代码


  1. <p>单个字符</p>
  2. <span class="halfStyle lazy " data-content="风">风</span>
  3. <span class="halfStyle lazy " data-content="流">流</span>
  4. <span class="halfStyle lazy " data-content="倜">倜</span>
  5. <span class="halfStyle lazy " data-content="傥">傥</span>

  6. <hr/>
  7. <p>用脚本自动美化:</p>

  8. <span class="textToHalfStyle lazy ">恋爱容易婚姻不易,且行且珍惜。</span>
复制代码

       需要做的就是将.halfStyleCSS类应用到每个需要半边美化的字符上。在上面的代码示例中,每个span里都包含了一个字符,我们在上面放置了data-属性,例如data-content="风",之后在伪元素里我们使用了attr(data-content)方法,这样.halfStyle:before就会变得动态,不需要你手工的硬编码它们的内容。


       对于多个字符需要美化的情况,我们可以创建一段jQuery代码自动将所有有.textToHalfStyleCSS类字符添加这种效果:


  1. jQuery(function($) {
  2.     var text, chars, $el, i, output;

  3.     // 遍历所有字符
  4.     $('.textToHalfStyle').each(function(idx, el) {
  5.         $el = $(el);
  6.         text = $el.text();
  7.         chars = text.split('');

  8.         // Set the screen-reader text
  9.         $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

  10.         // Reset output for appending
  11.         output = '';

  12.         // Iterate over all chars in the text
  13.         for (i = 0; i < chars.length; i++) {
  14.             // Create a styled element for each character and append to container
  15.             output += '<span aria-hidden="true" class="halfStyle lazy " data-content="' + chars[i] + '">' + chars[i] + '</span>';
  16.         }

  17.         // Write to DOM only once
  18.         $el.append(output);
  19.     });
  20. });
复制代码

       这样,不论是一段文字还是整篇文字,我们都能一次搞定,不必手工一个一个的设置,也不必一个一个的做图!


       高级做法:左右半个字符都用伪元素生成


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


CSS代码


  1. .halfStyle {
  2.     position:relative;
  3.     display:inline-block;
  4.     font-size:80px; /* or any font size will work */
  5.     color: transparent; /* hide the base character */
  6.     overflow:hidden;
  7.     white-space: pre; /* to preserve the spaces from collapsing */
  8. }
  9. .halfStyle:before { /* creates the left part */
  10.     display:block;
  11.     z-index:1;
  12.     position:absolute;
  13.     top:0;
  14.     width: 50%;
  15.     content: attr(data-content); /* dynamic content for the pseudo element */
  16.     overflow:hidden;
  17.     pointer-events: none; /* so the base char is selectable by mouse */
  18.     color: #f00; /* for demo purposes */
  19.     text-shadow: 2px -2px 0px #af0; /* for demo purposes */
  20. }
  21. .halfStyle:after { /* creates the right part */
  22.     display:block;
  23.     direction: rtl; /* very important, will make the width to start from right */
  24.     position:absolute;
  25.     z-index:2;
  26.     top:0;
  27.     left:50%;
  28.     width: 50%;
  29.     content: attr(data-content); /* dynamic content for the pseudo element */
  30.     overflow:hidden;
  31.     pointer-events: none; /* so the base char is selectable by mouse */
  32.     color: #000; /* for demo purposes */
  33.     text-shadow: 2px 2px 0px #0af; /* for demo purposes */
  34. }
复制代码

        你会发现,我们的实现方法可以很灵活,现在表象上是有三个字重叠,我们可以让每个字都各占1/3,这样,我得到一个三色字。上面这些例子都是左右分色,其实我们也可以让它上下分色或上中下分色。



观看演示


       想起了电影《卧虎藏龙》了的一句话,“心有多大,江湖就有多大”,作为Web程序员也是如此,只有我们用于探索和创新,有很多任务我们都可以用更简单,更方便的方法完成。你有此同感吗?



【用CSS美化半个字符巧妙方法】相关文章

1. 用CSS美化半个字符巧妙方法

2. CSS Beautify – 方便的在线 CSS 代码美化工具

3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

4. Ocrad.js – JS 实现 OCR 光学字符识别

5. 随机字符变换效果的jQuery插件开发教程

6. 随机字符变换效果的jQuery插件开发教程

7. jQuery多级联动美化版Select下拉框

8. 基于jQuery美化联动下拉选择框

9. html/css应用的方法

10. 5种方法立刻写出更好的CSS代码

本文来源:https://www.51html5.com/a1043.html

点击展开全部

﹝用CSS美化半个字符巧妙方法﹞相关内容

「用CSS美化半个字符巧妙方法」相关专题

其它栏目

也许您还喜欢