多种图形遮罩文字动画效果-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><br>
Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.<br><br>
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.<br><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><br>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.<br><br>
Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.<br><br>
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.<br><br>
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb<br><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><br>
</section>
<section class="live">
<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 pilo.........完整代码请登录后点击上方下载按钮下载查看