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

最新推荐文章于 2023-01-08 22:44:08 发布

ccd756601501

最新推荐文章于 2023-01-08 22:44:08 发布

阅读量217

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ccd756601501/article/details/54025275

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

<!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>

ccd756601501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css示例学习---文字特效1

通常情况下，设置文字的样式，效果都是作用域整个文字的，比如设置它的颜色，那么整个文字都会变色，下面介绍一下如何给文字的一部分设置指定的样式。loveSky.南方姑娘.antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; w
复制链接

扫一扫