如何仅用CSS动画实现图片从上到下逐段显示效果？

一、图片从上到下逐段显示方案（无需额外容器） #

直接通过clip-path实现裁剪动画，简洁高效：

.myimg {
  clip-path: inset(0 0 100% 0); /* 初始仅显示图片顶部0区域 */
  animation: clipReveal 4s forwards;
}

@keyframes clipReveal {
  to {
    clip-path: inset(0 0 0 0); /* 动画结束后显示完整图片 */
  }
}

原理：clip-path: inset()参数依次为「上、右、下、左」的裁剪距离，初始状态下底部裁剪100%（完全隐藏图片），动画过程中底部裁剪距离逐渐变为0，图片就会从上到下逐段平滑露出。

二、带遮罩层的图片显示方案（兼容旧浏览器） #

如果clip-path兼容性不满足需求，可采用容器+遮罩层的方式：

.img-wrapper {
  position: relative;
  overflow: hidden;
  width: fit-content; /* 自适应图片宽度 */
  height: fit-content;
}

.myimg {
  display: block;
}

/* 遮罩层完全覆盖图片，背景色与页面背景一致 */
.img-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 替换为你的页面背景色 */
  animation: maskSlideUp 4s forwards;
}

@keyframes maskSlideUp {
  from {
    height: 100%;
    transform: translateY(0);
  }
  to {
    height: 0;
    transform: translateY(-100%);
  }
}

HTML结构：

<div class="img-wrapper">
  <img src="your-image-url" class="myimg" alt="Image description">
</div>

原理：遮罩层初始完全覆盖图片，动画时高度从100%收缩至0并向上移动，逐步露出下方的图片，实现逐段显示效果。

三、背景配合文字的逐段显示方案 #

若图片方案不可行，可通过文字背景裁剪动画实现类似效果：

.reveal-text {
  font-size: 2rem;
  font-weight: 700;
  color: transparent; /* 文字透明，用背景填充 */
  background-image: linear-gradient(#222, #222); /* 文字颜色 */
  background-size: 100% 100%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textReveal 4s forwards;
}

@keyframes textReveal {
  to {
    background-position: 0 0;
  }
}

HTML结构：

<h1 class="reveal-text">这里是需要逐段显示的文字内容</h1>

原理：利用background-clip: text将背景裁剪至文字区域，通过动画改变背景位置，让文字从下到上逐步显示。

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