CSS设置半个文字的样式

2018-7-11 23:18| 作者: antzone| 查看: 264| 评论: 0|来自: 蚂蚁部落

通常情况下,文字的样式作用于整个文字,下面介绍一下如何为部分文字设置指定的样式。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!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一章节。

(3).绝对定位参阅CSS position:absolute 绝对定位一章节。

(4).内联元素转换为块级元素参阅内联元素和块级元素相互转换一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部