摘要：最近看到幾個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>
