Heim > Artikel > Web-Frontend > css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
css如何实现一个文字两种颜色代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:582282Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML前端开发之路--弹性盒模型_html/css_WEB-ITnoseNächster Artikel：CSS3的calc()用法简单介绍_html/css_WEB-ITnose