多种图形遮罩文字动画效果-html代码-BFW代码库

多种图形遮罩文字动画效果

代码语言：html

代码描述：多种图形遮罩文字动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,400&display=swap");
html {
	font-family: lato, sans-serif;
	font-size: 16pt;
	font-weight: 300;
	width: 100vw;
	height: 100vh;
	background: hsla(220, 20%, 10%, 0.5);
	color: black;
}
section {
	position: absolute;
	padding: 10px;
	box-sizing: border-box;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
img {
	float: right;
	margin: 10px;
	opacity: 0.5;
}
.live {
	clip-path: polygon(
		var(--x0) var(--y0),
		var(--x1) var(--y1),
		var(--x2) var(--y2),
		var(--x3) var(--y3)
	);
	color: yellow;
	z-index: 10;
}

.live img {
	opacity: 1;
}

.live small {
	color: blue;
	
}

div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>

</head>
<body translate="no">
<section>
<div>
<h1>Samuel L. Clippath</h1>
<small>Click to restart animated clip-path</small>
</div>
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. <br>

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.<br.........完整代码请登录后点击上方下载按钮下载查看