効果（後ろのソースコード）：
X特殊効果[html + css + js]ソースコード
成し遂げる：
1.ラベルを定義します。メインは下部のボックス、ビデオは背景ビデオ、.coverはXです。
<main>
<video src="video/11.mp4" autoplay loop muted></video>
<div class="cover"></div>
</main>
2.メインとビデオの基本的なスタイルを定義します。
main{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
main video{
width: 100%;
}
位置：相対相対位置
オーバーフロー：非表示オーバーフロー非表示
3.マスクレイヤーの基本スタイルを定義します。
.cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: scale(20);
mix-blend-mode: multiply;
}
位置：絶対絶対位置
背景色：＃000;白の
変換スケール（20）;
ミックスのズームイン-ブレンドモード：乗算;ブレンドモード、白のX部分が透明になります;
ブレンドモード4. Xを作成し、二重疑似を渡します
-クラス2つのボックスを作成し、45度傾けます。
.cover::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 300px;
transform: translate(-50%,-50%) skew(45deg);
background-color: #fff;
}
.cover::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 300px;
transform: translate(-50%,-50%) skew(-45deg);
background-color: #fff;
}
背景色：#fff;白い
スキュー（45度）は45度傾斜しています。
完全なソースコード：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
main video{
width: 100%;
}
.cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: scale(20);
mix-blend-mode: multiply;
}
.cover::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 300px;
transform: translate(-50%,-50%) skew(45deg);
background-color: #fff;
}
.cover::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 300px;
transform: translate(-50%,-50%) skew(-45deg);
background-color: #fff;
}
</style>
</head>
<body>
<main>
<video src="video/11.mp4" autoplay loop muted></video>
<div class="cover"></div>
</main>
<script>
let cover = document.querySelector('.cover');
let scale = 20;
let bian = setInterval(function(){
scale = scale - 0.05;
cover.style.cssText = `transform: scale(${
scale});`
if(scale<=1)
{
clearInterval(bian);
}
},20)
</script>
</body>
</html>
総括する：
実現は難しくありません、
あなたは書く、
来る、
殺す、
これ、
不快な時間をすることができます。