如何利用HTML Mask实现行列交错遮罩设计效果？

需求说明 #

需要实现行列交错的视觉设计，必须采用行列结构：

• 每行实现背景色在两种颜色间切换的动画
• 每列实现上下方向的位移动画
• 必须运用HTML/CSS Mask技术

实现思路与代码 #

核心逻辑

1. 行背景色切换：通过CSS @keyframes给每行的背景元素（这里用SVG rect）设置颜色过渡动画
2. 列上下动画：利用transform: translateY()实现列元素的循环位移动画，不同列设置差异化的动画参数增强层次
3. Mask交错裁剪：给列容器添加CSS Mask，控制列的显示区域，实现与行的视觉交错效果

完整代码

CSS代码

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.columns-container,
.rows-container {
  width: 100%;
  height: 100%;
  display: flex;
}

.rows-container {
  flex-direction: column;
}

.columns-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  /* 用线性渐变做mask，只显示中间列区域，实现行列交错 */
  mask: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
}

#bg-container {
  width: 50%;
  height: 50%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* 行样式与颜色切换动画 */
.anim-row-1 {
  flex: 1 1 213px;
}
.anim-row-1 rect {
  animation: rowColor1 3s infinite alternate;
}
@keyframes rowColor1 {
  0% { fill: blue; }
  100% { fill: darkblue; }
}

.anim-row-2 {
  flex: 0 1 175px;
}
.anim-row-2 rect {
  animation: rowColor2 3s infinite alternate;
}
@keyframes rowColor2 {
  0% { fill: red; }
  100% { fill: darkred; }
}

.anim-row-3 {
  flex: 1 1 213px;
}
.anim-row-3 rect {
  animation: rowColor3 3s infinite alternate;
}
@keyframes rowColor3 {
  0% { fill: yellow; }
  100% { fill: gold; }
}

/* 列样式与上下位移动画 */
.anim-column-1 {
  flex: 1 1 188px;
}
.anim-column-1 rect {
  animation: columnMove1 4s infinite alternate ease-in-out;
}
@keyframes columnMove1 {
  0% { transform: translateY(-20%); }
  100% { transform: translateY(20%); }
}

.anim-column-2 {
  flex: 0 1 154px;
}
.anim-column-2 rect {
  animation: columnMove2 4s infinite alternate-reverse ease-in-out;
}
@keyframes columnMove2 {
  0% { transform: translateY(-15%); }
  100% { transform: translateY(15%); }
}

.anim-column-3 {
  flex: 1 1 188px;
}
.anim-column-3 rect {
  animation: columnMove3 4s infinite alternate ease-in-out;
}
@keyframes columnMove3 {
  0% { transform: translateY(-20%); }
  100% { transform: translateY(20%); }
}

/* 列元素半透明，让行背景透出，增强交错视觉 */
.columns-container svg rect {
  opacity: 0.6;
}

HTML代码

<div id="bg-container">
  <div class="rows-container">
    <div class="anim-row-1">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="blue" width="100%" height="100%" />
      </svg>
    </div>
    <div class="anim-row-2">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="red" width="100%" height="100%" />
      </svg>
    </div>
    <div class="anim-row-3">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="yellow" width="100%" height="100%" />
      </svg>
    </div>
  </div>
  <div class="columns-container">
    <div class="anim-column-1">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="purple" width="100%" height="100%" />
      </svg>
    </div>
    <div class="anim-column-2">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="pink" width="100%" height="100%" />
      </svg>
    </div>
    <div class="anim-column-3">
      <svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect fill="green" width="100%" height="100%" />
      </svg>
    </div>
  </div>
</div>

自定义调整提示 #

• 若需要更复杂的交错形状，可以把CSS渐变Mask替换为SVG Mask，通过绘制路径定义遮罩区域
• 行的颜色动画可以改为给行div设置background-color动画，替换SVG rect的fill动画
• 可以调整列动画的时长、位移幅度、缓动函数，实现不同的运动节奏
• 修改Mask的渐变百分比，可调整列的显示范围，适配不同的行列比例

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