javascript - 如何在打开页面时垂直加载图像？

Question

如何让我的图片在打开页面时垂直加载？我知道如何使用 HTML/CSS 使 div 元素淡入页面，但我想知道如何替换垂直加载的标题图像，如 http://enod.fr/

谢谢!对不起，如果这个问题太模糊了。如果有人可以将我引导到我可以使用的 codepen 或 jsfiddle 链接，那也会有很大帮助!

Answer 1

这可以通过 CSS 动画来完成。这是一个简单的示例，展示了如何在元素上使用背景图像，并为该元素的高度设置动画以获得您想要的效果。

.parent {
  height: 300px;
  width: 100%;
}

.parent > div {
  height: 0px;
  background-image: url('http://enod.fr/wp-content/uploads/2016/05/home.jpg');
  background-size: 100%;
  animation-name: load-vertically;
  animation-duration: 1.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  position: relative;
}

.parent > div > h1 {
  opacity: 0;
  animation-name: delay-show;
  animation-duration: 0.5s;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-family: Arial;
  text-transform: uppercase;
  transform: translateY(-50%);
}


@keyframes load-vertically {
  from {
    height: 0px;
  }
  
  to {
    height: 300px;
  }
}

@keyframes delay-show {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

<div class="parent">
  <div>
    <h1>Title</h1>
  </div>
</div>