如何实现支持任意颜色的容器z-index层级孔洞遮罩效果？

需求说明 #

• 构建包含3×3小方块的main-container，要求main-container的z-index高于内部square
• 将square设置为透明状态
• z-index为1的动画元素穿过容器组时：
  • 处于方块间隙（main-container的可见区域）时隐藏
  • 处于square区域时可见
• 现有代码仅支持main-container背景为黑色的场景，需修改为适配任意背景色

修改后的完整代码实现 #

HTML结构 #

<div class="main-container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

CSS样式（核心修改） #

/* 可设置任意页面背景色测试效果 */
body {
  background-color: #e6f7ff;
}

.main-container {
  position: relative;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  width: 30vw;
  height: 30vw;
  align-items: center;
  justify-content: space-evenly;
  padding: 1%;
  border: solid 1px gray;
  border-radius: 10%;
  /* 移除原黑色背景与混合模式，改用mask实现不受背景影响的遮罩 */
  mask: 
    linear-gradient(black, black) content-box,
    linear-gradient(black, black);
  mask-composite: exclude;
  z-index: 3;
}

.square {
  width: 24%;
  height: 24%;
  margin: 1%;
  border-radius: 20%;
  background-color: transparent;
  z-index: 1;
}

.animated-square {
  width: 2vw;
  height: 2vw;
  background-color: red;
  position: absolute;
  left: 0;
  top: calc(50vh - 1vw);
  z-index: 1;
}

JavaScript逻辑 #

// 创建动画元素
const animatedSquare = document.createElement('div');
animatedSquare.classList.add('animated-square');
document.body.appendChild(animatedSquare);

// 执行动画
function animateSquare() {
  const currentPosX = parseFloat(window.getComputedStyle(animatedSquare).left);
  const newPosX = currentPosX + 5;
  animatedSquare.style.left = `${newPosX}px`;

  // 到达右侧中间位置停止动画
  if (newPosX + animatedSquare.offsetWidth >= window.innerWidth / 2) {
    return;
  }
  
  requestAnimationFrame(animateSquare);
}

// 启动动画
animateSquare();

核心原理 #

1. CSS Mask替代混合模式：放弃原方案依赖黑色背景与mix-blend-mode的实现，改用mask属性结合mask-composite: exclude，将main-container的间隙区域排除，仅保留内部square的形状作为显示通道，完全不受背景色影响。
2. 透明Square保留布局：将square设为透明，仅利用其占据的布局空间参与遮罩计算，不干扰页面背景显示。
3. 层级关系维持：main-container的z-index（3）高于动画元素（1），遮罩会直接作用于下层的动画元素，精准实现“间隙隐藏、Square区域可见”的效果。

内容的提问来源于stack exchange，提问作者Vikkio92