纯CSS实现文字揭示动画仅作用于文本不提前展示背景问题咨询

开发者阿泽

2026-9-30

解决方案

核心思路是让背景层的显示时机和文本揭示动画的结束时间完全对齐，同时限制揭示遮罩的作用范围仅为文本区域：

完整修改后的CSS代码

body {
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", sans-serif;
  background-color: #f5f5f5;
}

.reveal {
  position: relative;
  height: 100%;
}
.reveal-text {
  width: 80%;
  height: 100%;
  z-index: 2;
  background-color: #f5f5f5;
}

.backdrop {
  background-color: #000000;
  opacity: 0.5;
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* 初始设为隐藏 */
  visibility: hidden;
  /* 增加和文本揭示同步的动画 */
  animation: showBackdrop 10s linear 0.1s infinite;
}

.reveal-block {
  position: absolute;
  top: 0;
  left: 0;
  /* 宽度和文本区域保持一致，仅覆盖文本范围 */
  width: 80%;
  height: 100%;
  background-color: #f5f5f5;
  /* 提高层级确保遮罩能盖住文本 */
  z-index: 3;
  animation: reveal 10s linear 0.1s infinite;
}

@keyframes reveal {
  0% {
    transform: scale3d(1, 1, 1);
    transform-origin: 100% 0%;
  }
  100% {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 0%;
  }
}

/* 背景层显隐动画，仅在文本动画结束时触发显示 */
@keyframes showBackdrop {
  0%, 99.9% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}