视频背景,文字特效
Posted 杨柳岸残月孤轮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了视频背景,文字特效相关的知识，希望对你有一定的参考价值。
代码来自头条号\'前端小智\',侵权删
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
position: absolute;
overflow: hidden;
}
h2{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
flex-direction: column;
text-transform: uppercase;
text-align: center;
font-size: 20vw;
font-weight: 800;
line-height: 0.85em;
color: #fff;
background-color: #000;
mix-blend-mode: multiply;
}
span{
font-size: 0.4em;
line-height: 0.85em;
}
video{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
</style>
</head>
<body>
<section>
<video autoplay muted loop src="https://vd2.bdstatic.com/mda-mbcx89u69bqqfkcx/sc/cae_h264_clips/1613226363/mda-mbcx89u69bqqfkcx.mp4?auth_key=1619102707-0-0-2645fd52c7e75eccc27ad5df8658ad24&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=" style="position: absolute; top: 0px; left: 0px;"></video>
<h2>video in text <span>background</span></h2>
</section>
</body>
</html>以上是关于视频背景,文字特效的主要内容，如果未能解决你的问题，请参考以下文章