前言:这是一个混合属性,作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合,产生动态文字效果。
效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
body {
background: #000;
}
video {
width: 100%;
}
.txt {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
color: #000;
font-size: 10em;
font-weight: bold;
position: absolute;
inset: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="box">
<video src="./demo.mp4" autoplay muted></video>
<div class="txt">黑神话:悟空</div>
</div>
<script></script>
</body>
</html>