需求：入场动画有一种云雾拨开的效果，再呈现主页面

视频背景透明.gif

张鑫旭的博客《如何让MP4 video视频背景色变成透明？》中提到mix-blend-mode混合模式中有一种混合模式名为滤色，单词是screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。

云雾原视频

<div class="mask js-mask"></div> <!--入场动画--> <video class="video js-video" width="100%" height="100%" muted autoplay> <source src="video/video.mp4" type="video/mp4"> 您的浏览器不支持Video标签。 </video>

.main{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: url("../img/bg.jpg") center no-repeat;
    background-size: 100% 100%;
.title{
    margin-top: 400px;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    color: rgba(85, 184, 226, 0.91);
.mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/bg2.jpg") center no-repeat;
    background-size: 100% 100%;
    z-index: 9;
.mask._hide{
    display: none;
.video{
    position: absolute;
    mix-blend-mode: screen;
    object-fit: fill;
    z-index: 99;
.video._hide{
    display: none;
var  bShow = true,//判断播放第一次大于指定时间
     jqMask = $('.js-mask'),
     jqVideo = $('.js-video');
//初始化播放视频
var fInitVideo = function(){
    jqVideo.on('timeupdate', fHideMask);//隐藏遮罩层
    jqVideo.on('ended', fCloseVideo);//视频播放结束隐藏
//隐藏遮罩层
var fHideMask = function(){
    var nTime = jqVideo[0].currentTime;//用秒数来显示当前播放进度
    if(nTime >= 0.5 && bShow){//当视频播放到固定位置隐藏遮罩层
        bShow = false;
        jqMask.addClass('_hide');
//视频播放结束隐藏
var fCloseVideo = function(){
    jqVideo.addClass('_hide');
/** ==================== **/
fInitVideo();//初始化播放视频