星空网 > 软件开发 > 网页设计

利用css设置半个文字的样式代码实例

利用css设置半个文字的样式代码实例:
通常情况下,设置文字的样式,效果都是作用域整个文字的,比如设置它的颜色,那么整个文字都会变色,下面介绍一下如何给文字的一部分设置指定的样式,希望能够给需要的朋友带来一定的帮助。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; white-space:pre; }.antzone:before{ display:block; z-index:1; position:absolute; top:0; left:0; width:50%; content:attr(data-content); overflow:hidden; color:#f00;}</style></head><body><span class="antzone" data-content="s">s</span><span class="antzone" data-content="o">o</span><span class="antzone" data-content="f">f</span><span class="antzone" data-content="t">t</span> </body></html>

上面的代码实现了我们的要求,字符串中的文字只有一半被设置为红色,下面简单介绍一下它的实现原理。
一.实现原理:
效果看起来很炫,其实原理非常的简单,就是利用:before伪元素选择器和content属性结合使用,为span元素内添加一个伪元素,同时为元素的内容设置为span元素的data-content属性值,并且设置它为绝对定位使其覆盖在原来的span元素之上,宽度为原来span元素的一半,然后再设置这个为元素中字体的颜色,这样就实现了我们的要求,看起来是一个文字,其实是两个文字叠加覆盖的效果。
二.相关阅读:
1.:before可以参阅CSS的伪对象选择符before/E::before一章节。
2.content属性可以参阅CSS的content属性一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14781

更多内容可以参阅:http://www.softwhy.com/divcss/




原标题:利用css设置半个文字的样式代码实例

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨界营销:https://www.goluckyvip.com/tag/1677.html
bww澳洲专线:https://www.goluckyvip.com/tag/16771.html
by Humankind:https://www.goluckyvip.com/tag/16772.html
Byju's:https://www.goluckyvip.com/tag/16773.html
BYKOL:https://www.goluckyvip.com/tag/16774.html
bytesku:https://www.goluckyvip.com/tag/16775.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流