效果（源码在后面）：
X特效【html+css+js】源码
实现：
1. 定义标签，main是底层盒子，video是背景视频，.cover是X：
<main>
<video src="video/11.mp4" autoplay loop muted></video>
<div class="cover"></div>
</main>
2. 定义main与视频的基本样式：
main{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
main video{
width: 100%;
}
position：relative 相对定位
overflow：hidden 溢出隐藏
3. 定义遮罩层 .cover 基本样式：
.cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
transform: scale(20);
mix-blend-mode: multiply;
}
position：absolute 绝对定位
background-color: #000; 白色
transform scale（20）；放大
mix-blend-mode: multiply; 混合模式，白色的X部分将变透明；
混合模式
4. 制作X，通过双伪类制作两盒子，再让其倾斜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;
}
background-color: #fff; 白色
skew（45deg）倾斜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>
总结：
实现并不难，
可以写写，
来，
消磨消磨，
这，
令人不喜的时间。