滑动图像以显示带有CSS动画的文本

我想仔细看一下CSS动画属性，并逐步浏览我在自己的投资组合网站上使用的效果：使文本从移动的对象后面出现。 如果您想查看最终产品，这是一个孤立的示例 。

这是我们将要处理的内容：

看笔
揭示文本动画的第4部分–响应者Jesper Ekstrom（ @ jesper-ekstrom ）
在CodePen上 。

即使您对效果本身不很感兴趣，这也是扩展CSS知识并开始创建自己的独特动画的绝佳练习。 就我而言，深入研究动画使我对CSS的能力变得更加自信，并提高了我的创造力，这使我对整个前端开发更加感兴趣。

准备？ 组。 我们走吧！

步骤1：标记主要元素

在开始动画之前，让我们创建一个覆盖整个视口的父容器。 在其中，我们将文本和图像添加到单独的div中，以便以后更轻松地自定义它们。 HMTL标记如下所示：

<!-- The parent container -->
<div class="container"> 
  <!-- The div containing the image -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <!-- The div containing the text that's revealed -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>

我们将使用此可靠的转换技巧使divs在垂直和水平方向上居中，并具有以下position: absolute; 在父容器中，并且由于我们希望图像显示在文本的前面，因此我们向其添加了更高的z-index值。

/* The parent contai