效果截图：

CSS代码：

*{
    padding: 0px;
    margin: 0px;
}
p{
    width: 80%;
    height: 12px;
    background-color: #CCCCCC;
    margin: 0rem auto 2rem auto;
    color: white;
}
p.first{
    width: 50%;
}
.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0.95;
}
.mask span{
    font-size: 60px;
    color: white;
}
.mask span:nth-child(2){
    font-size: 14px;
}
.hide{
    display: none;
}

HTML代码：

<!--遮罩层-->
<div class="mask hide" id="mask">
    <span>MASK</span>
    <span> ~ 华丽的遮罩层</span>
</div>
<!--页面华丽的占位符-->
<p class="first"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

JS代码：

var count = 0; //计数
var outTime = 0.1; //时间-分钟(可自定义)

//计时器 每秒执行
window.setInterval(go, 1000); 

function go() {
    count++; //秒数每秒累加
    //判断计数器累加秒数与自定义分钟转换的秒数是否相等
    if (count == outTime*60) {
        //重置计数 以便于二次执行
        count = 0;
        //显示遮罩
        $("#mask").removeClass("hide");
    }
}

//监听鼠标是否有移动
var x ;
var y ;
$(document).on("mousemove",function(event){
    var x1 = event.clientX;
    var y1 = event.clientY;
    if (x != x1 || y != y1) {
        count = 0;
        //隐藏遮罩
        $("#mask").addClass("hide");
    }
    x = x1;
    y = y1;
})

//监听键盘是否敲击
$(document).on("keydown",function(event){
    if(!event){
        count = 0;
    }else{
        //隐藏遮罩
        $("#mask").addClass("hide");
    }
})

其实以上代码，在很多地方都适用。鼠标和键盘无操作后，可以有提示、有弹窗、退出系统、跳转网页等等很多用法，具体用法根据需求来定。O(∩_∩)O哈哈~