Question

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

那样替换垂直加载的标题图像

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

Answer 1

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

你可以用css @keyframes

来做

img{
    width:100%;
    position:fixed;
    top:100%;
    height:300px;
    overflow:hidden;
    opacity:0;
    animation:slide_down 1s forwards;
    -webkit-animation:slide_down 1s forwards;
}

@keyframes slide_down{
    from{opacity:0;top:-100%}
    to{opacity:1;top:0%;}
    
}@-webkit-keyframes slide_down{
    from{opacity:0;top:-100%}
    to{opacity:1;top:0%;}
    
}

<img src='http://enod.fr/wp-content/uploads/2016/05/home.jpg'>

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

2 个答案: