前言
我都不知道用什么样的词来描述这个效果,反正你看吧!这个效果看上去很简单,但是一旦实现起来你会发现也不复杂,废话不多说直接上源码,喜欢的点个关注、留个免费的
html源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字穿透</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="modal">
<h1>喜迎新春 </h1>
</div>
</body>
</html>
css源码
body {
padding: 0 0;
margin: 0 0;
height: 100vh;
box-sizing: border-box;
background: url('../img/2.jpg') no-repeat center/cover;
}
.modal {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .7);
}
.modal h1 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12vw;
-webkit-text-stroke: 1px #ffffff; /** 随着视口而变动 **/
background: url('../img/1.jpg');
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}