您的位置：首页 > Web前端 > CSS

css示例学习---文字特效1

2017-01-04 22:39 295 查看

通常情况下，设置文字的样式，效果都是作用域整个文字的，比如设置它的颜色，那么整个文字都会变色，下面介绍一下如何给文字的一部分设置指定的样式。

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>loveSky.南方姑娘</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">k</span>
<span class="antzone" data-content="f">y</span>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航