如何在如图所示的网页上制作窗帘效果？

<div id="curtain-container"></div>

#curtain-container {
  width: 100%;
  height: 400px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

#curtain-container::before,
#curtain-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #000;
  transition: transform 0.5s ease-in-out;
}

#curtain-container::before {
  left: 0;
  transform-origin: left center;
}

#curtain-container::after {
  right: 0;
  transform-origin: right center;
}

const curtainContainer = document.getElementById("curtain-container");

function openCurtain() {
  curtainContainer.classList.add("open");
}

function closeCurtain() {
  curtainContainer.classList.remove("open");
}

curtainContainer.addEventListener("click", function() {
  if (curtainContainer.classList.contains("open")) {
    closeCurtain();
  } else {
    openCurtain();
  }
});