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

最新推荐文章于 2024-07-12 14:38:32 发布

渡猿人

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量422

点赞数 9

分类专栏：前端每日一练文章标签： html5 css 前端

本文链接：https://blog.csdn.net/m0_50105168/article/details/135760547

版权

前端每日一练专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

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

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