遮罩层中间实现倒计时三秒钟

以下是一个示例代码实现：

HTML代码：

<div class="overlay">
  <div class="countdown">3</div>
</div>

CSS代码：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.countdown {
  font-size: 5rem;
  color: white;
  animation: countdown 3s linear forwards;
}

@keyframes countdown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

JS代码：

// 获取倒计时元素
const countdownEl = document.querySelector('.countdown');

// 设置倒计时时间
let countdownTime = 3;

// 定义倒计时函数
function countdown() {
  countdownTime--;
  countdownEl.textContent = countdownTime;
  if (countdownTime === 0) {
    // 倒计时结束后移除遮罩层
    document.querySelector('.overlay').remove();
  } else {
    setTimeout(countdown, 1000);
  }
}

// 开始倒计时
countdown();

代码解释：

1. HTML代码中，遮罩层使用一个`div`元素实现，其中包含一个`div`元素作为倒计时元素；
2. CSS代码中，遮罩层使用`position: fixed`实现固定在页面上，使用`background-color`设置背景颜色，使用`display: flex`实现元素居中对齐，倒计时元素使用`animation`实现淡出效果；
3. JS代码中，通过`document.querySelector`获取倒计时元素，通过`let`定义倒计时时间，通过`function`定义倒计时函数；
4. 倒计时函数中，倒计时时间减1，更新倒计时元素的文本内容，如果倒计时时间为0，移除遮罩层，否则使用`setTimeout`设置1秒后再次调用倒计时函数；
5. 最后调用倒计时函数。