css遮罩层从下往上_CSS躬行记（8）——裁剪和遮罩

CSS遮罩层可以从下往上实现，具体步骤如下：

1. 创建一个父容器，在该容器内创建一个子容器。

2. 将子容器的position属性设置为absolute，top、left、right、bottom属性设置为0，使其充满整个父容器。

3. 给父容器设置一个背景图片或颜色，并将其position属性设置为relative。

4. 在子容器内创建一个遮罩层，可以使用一个div元素，将其position属性设置为absolute，top、left、right、bottom属性设置为0，使其充满整个子容器。

5. 给遮罩层设置一个背景图片或颜色，并将其opacity属性设置为0.5或其他透明度，使其成为一个半透明的遮罩层。

6. 将遮罩层的z-index属性设置为比父容器的z-index属性小，这样遮罩层就在父容器下面。

7. 最后，使用CSS3的动画属性，将遮罩层从下往上移动，实现遮罩层从下往上的效果。

示例代码如下：

HTML代码：

<div class="parent">
  <div class="child">
    <div class="mask"></div>
  </div>
</div>

CSS代码：

.parent {
  position: relative;
  background: url("background.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mask {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  animation: moveUp 2s ease-in-out forwards;
}

@keyframes moveUp {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}