如何在打開頁面時垂直加載圖像？

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>

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'>