加载页面显示三秒钟

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/