css3实现文字穿透效果

袁志蒙 495次浏览

摘要:最近看到几个css新属性,突发奇想的可以实现一个比较有意思的效果,我们叫做文字穿透效果吧,主要用到了几个css属性:# 文字设置成透明 color: transparent; # 文字描边 text-stroke: 1px #fff;

最近看到几个css新属性,突发奇想的可以实现一个比较有意思的效果,我们叫做文字穿透效果吧,主要用到了几个css属性:

# 文字设置成透明
color: transparent;

# 文字描边
text-stroke: 1px #fff;

# 以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉
background-clip: text;

实现效果:

css实现文字穿透效果

HTML代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>文字穿透效果</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        --bg: url("./bg.jpg") no-repeat center/cover;
        background: var(--bg);
        height: 100vh;
    }

    .modal {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .7);
    }

    .modal h1 {
        height: 100%;
        width: 100%;
        font-size: 12vw;
        display: flex;
        justify-content: center;
        align-items: center;
        text-stroke: 1px #fff;
        -webkit-text-stroke: 1px #fff;
        background: var(--bg);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;

    }
    </style>
</head>

<body>
    <div class="modal">
        <h1>YZMCMS.COM</h1>
    </div>
</body>

</html>


随机内容

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~