前端每日一练 “文字穿透效果”

发布时间：2024年01月23日

前言

? ? ? ? ? ?我都不知道用什么样的词来描述这个效果，反正你看吧！这个效果看上去很简单，但是一旦实现起来你会发现也不复杂，废话不多说直接上源码，喜欢的点个关注、留个免费的

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;
}

最后实现效果

文章来源:https://blog.csdn.net/m0_50105168/article/details/135760547
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章