1

我想通过使用纯 css 创建一个显示文本效果并具有以下代码。但是我只希望效果只适用于文本区域而不是背景。如果我将width打开更改.reveal-block为80%背景，则在显示所有文本之前立即显示。但是我想用动画显示文本，一旦文本完成。立即显示背景。我尝试过使用animation-timing-function: linear, steps(1, end)，但背景区域仍然以线性方式显示

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: visible;
}

.reveal-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  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%;
  }
}
<header class="page-header">
  <div class="page-title reveal">
    <div class="reveal-block"></div>
    <div class="backdrop"></div>
    <div class="reveal-text">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <span>test input<input></input></span>
      <span>test input<input></input></span>
      <span>test input<input></input></span>
      <span>test input<input></input></span>
      <span>test input<input></input></span>
    </div>
  </div>
</header>

4

0 回答 0