纯css实现网页的文字穿透效果

最新推荐文章于 2023-09-22 14:06:39 发布

正在奋斗的程序猿

最新推荐文章于 2023-09-22 14:06:39 发布

阅读量221

点赞数 2

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_74293254/article/details/131387477

版权

css 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

实现效果:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{ 
				--bg: url(img/1.jpg) no-repeat center/cover;
				background:var(--bg);
				height: 100vh;
				font-family: 'Open Sans', sans-serif;
			}
			.modal{
				background: rgba(0,0,0,0.7);
				width: 100%;
				height: 100%;
			}
			.modal h1{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12vw;
				text-stroke: 1px #fff;
				-webkit-text-stroke: 1px #FFFFFF#fff;
				background: var(--bg);
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="modal">
			<h1>老李</h1>
		</div>
	</body>
</html>

关注博主即可阅读全文