加載頁面顯示三秒鐘

Question

我正在製作一個個人作品集，希望將我的網站標語顯示爲3秒（全屏），然後淡出以顯示實際的網站。什麼代碼用於顯示一些初始div然後淡出到實際的網站？

Answer 1

這個工程，與setTimeout()。在3000毫秒後，我們將類hidden添加到「加載元素」，將隱藏它。您可以自定義類以實現其他類型的動畫。例如，現在動畫設置爲運行500毫秒。

setTimeout(function() { 
 
    $('#loading').addClass('hidden'); 
 
}, 3000);

#loading{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-color: gray; 
 
    color: white; 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
    visibility: visible; 
 
} 
 
#loading.hidden{ 
 
    opacity: 0; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loading">Loading site...</div> 
 
<div id="site"> 
 
<h1>My site</h1> 
 
<p>Lorem ipsum</p> 
 
</div>

如果你喜歡常規的JavaScript，你可以做這樣的：

setTimeout(function() { 
    var element = document.getElementById('loading'); 
    element.classList += " hidden"; 
}, 3000); 

Answer 2

在你的HTML文檔的底部，加一個固定的div：

<div class="fixed">Tagline...</div> 

然後使其固定並用CSS填充100％：

.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

因此，現在您已將標語元素置於其他所有元素之上。你需要做的最後一件事是在3秒後淡出那個元素。這可以很容易地使用jQuery來實現，例如：

setTimeout(function() { 
    jQuery('.fixed').fadeOut(); 
}, 3000); 

這一切都需要

Answer 3

我使用CSS3關鍵幀/動畫做了一個只有CSS版本。

HTML：

<div id="websiteOverlay"> 
    "Some tagline" 
</div> 
<div class="container"> 
    <h1> 
    Website content header 
    </h1> 
    <p> 
    Website content body, with some paragraphs 
    </p> 
</div> 

CSS：

@-webkit-keyframes fadeOut { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

@keyframes fadeOut { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

#websiteOverlay { 
    text-align: center; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: black; 
    color: white; 
    opacity: 0; 
    -webkit-animation: fadeOut 3s; 
    animation: fadeOut 3s; 
} 

小提琴：https://jsfiddle.net/9z6ow28m/