Home >Web Front-end >HTML Tutorial >css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:582310browse
css如何实现一个文字两种颜色代码实例:
在实际应用中可能需要设置文本效果比较炫酷。
有一种效果就是将一个文字设置为两种颜色，使用普通的方法肯定是无法实现。
下面就分享一下实现此功能的代码实例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.antzone{ display:inline-block; font-size:80px; line-height:80px; color:#000; position:relative; overflow:hidden; white-space:pre;}.antzone:before{ position:absolute; left:0; top:0; color:#f00; display:block; width:30%; content:attr(data-content); overflow:hidden;}</style></head><body><span class="antzone" data-content="蚂">蚂</span><span class="antzone" data-content="蚁">蚁</span><span class="antzone" data-content="部">部</span><span class="antzone" data-content="部">部</span></body></html> 上面的代码实现了我们的要求，下面简单介绍一下它的实现过程。
一.实现原理:
原理非常的简单，就是通过:before伪对象选择器，再给span元素添加一个伪元素。
将此伪元素设置为绝对定位，这样就可以覆盖于原来span元素的内容之上。
然后给这个设置和原来span元素一样的文本内容，并设置颜色，最后通过控制伪元素宽度的方式来设置文字的变色范围。
二.相关阅读:
（1）.:before可以参阅CSS的伪对象选择符before/E::before一章节。
（2）.相对定位和绝对定位可以参阅css的absolute绝对定位和relative相对定位的区别一章节。
（3）.attr()可以参阅CSS的函数取值attr()一章节。
（4）.content可以参阅CSS的content属性一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18241
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML前端开发之路--弹性盒模型_html/css_WEB-ITnoseNext article：CSS3的calc()用法简单介绍_html/css_WEB-ITnose