纯CSS3实现半色字效果

最新推荐文章于 2022-12-23 09:03:18 发布

Mr.王征

最新推荐文章于 2022-12-23 09:03:18 发布

阅读量473

点赞数 7

分类专栏： CSS 文章标签： css3 css3效果 css3半色字 css3伪类

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88376856

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>半色字</title>
</head>
<body>


<style>

    div{
        width: 100px;
        height: 200px;
        background-color: #666;
    }
    i{
        font-style: normal;
        font-size: 100px;
        font-weight: bold;
        position: relative;

    }
    i:after{
        /*重要的内容  content*/
        font-style: normal;
        font-size: 100px;
        font-weight: bold;
        background-color: rgba(255,0,0,0.3);
        color: cyan;

        content: "人";
        /*中点代码     压层  实现视觉差效果  */
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        overflow: hidden;
        z-index: 10000;


    }

</style>


<div>
    <i>人</i>
</div>
</body>
</html>