摘要：最近看到几个css新属性，突发奇想的可以实现一个比较有意思的效果，我们叫做文字穿透效果吧，主要用到了几个css属性：# 文字设置成透明 color: transparent; # 文字描边 text-stroke: 1px #fff;
最近看到几个css新属性，突发奇想的可以实现一个比较有意思的效果，我们叫做文字穿透效果吧，主要用到了几个css属性：
# 文字设置成透明 color: transparent; # 文字描边 text-stroke: 1px #fff; # 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 background-clip: text;
实现效果：
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>
