css 实现文字本身倒影

努力搬砖的小码

于 2024-04-29 11:51:46 发布

阅读量182

点赞数 2

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_63199745/article/details/138307831

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html

   <div>
         <b class="nav"> XXXX</b>
   </div>

css

         .nav{
                position: relative;
                font-size: 40px;
                font-weight: bold;
            }
            .nav:after {
                position: absolute;
                content: "XXXX";
                width:204px;
                transform: rotateX(180deg) skewX(10deg);
                bottom: -38px;
                left: -4px;
                font-size: 40px;
                background: linear-gradient(to bottom, transparent 40%, #d6d6d6);
                background-clip: text;
                -webkit-background-clip: text;
                -moz-background-clip: text;
                color: transparent;
                }