css 文字画卷展开效果

好的，下面是一种实现文字画卷展开效果的 CSS 代码：

HTML 代码：

<div class="text-scroll">
  <div class="scroll-mask"></div>
  <div class="scroll-text">
    <p>这里是需要展示的文本内容。</p>
  </div>
</div>

CSS 代码：

.text-scroll {
  position: relative;
  overflow: hidden;
}

.scroll-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
  transform: translateY(-100%);
  animation: scroll 2s ease-in-out forwards;
}

.scroll-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%);
  animation: scroll 2s ease-in-out forwards;
}

@keyframes scroll {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

以上代码中，我们使用了一个父级 `.text-scroll` 元素来包裹需要展示的文本内容。我们将这个父级元素设置为相对定位，并将其 `overflow` 属性设置为 `hidden`，以便隐藏其子元素溢出的部分。然后，我们创建两个子元素，一个是用于遮罩效果的 `.scroll-mask`，另一个是用于显示文本内容的 `.scroll-text`。

我们使用 `linear-gradient` 背景渐变样式和 `transform` 属性来实现遮罩效果。在这里，我们将背景渐变的起点设置为透明色，终点设置为白色，使得遮罩从顶部逐渐向下展开。`transform: translateY(-100%)` 将遮罩元素移出可视区域，`animation` 属性将 `scroll` 动画应用到遮罩元素上，使其在 2 秒内向下展开至完全覆盖文本内容。

我们将文本内容通过 `.scroll-text` 元素显示出来，同样使用 `transform` 属性和 `animation` 属性来实现一个向下展开的动画效果。最后，我们将这些样式应用到相应的元素上，就可以实现文字画卷展开效果了。