用CSS制作遮罩框动画？

<div id="overlay"></div>

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置透明度为0.5的黑色背景 */
}

@keyframes fade-in {
  0% {
    opacity: 0; /* 初始透明度为0，完全透明 */
  }
  100% {
    opacity: 1; /* 最终透明度为1，完全不透明 */
  }
}

#overlay {
  animation: fade-in 1s ease-in-out; /* 使用fade-in动画，持续1秒，以缓入缓出的方式进行 */
}

// 使用JavaScript
document.getElementById("overlay").classList.add("show"); // 添加show类，展示遮罩框

// 使用CSS类
#overlay.show {
  display: block;
}

// 在需要隐藏遮罩框时，使用下面的方式
document.getElementById("overlay").classList.remove("show"); // 移除show类，隐藏遮罩框