加载页面显示三秒

Question

我正在制作个人作品集，想显示我的网站标语大约 3 秒（全屏），然后淡出以显示实际网站。什么代码用于显示一些初始 div 然后淡出到实际网站？

Answer 1

这适用于 setTimeout()。 3000 毫秒后，我们将 class hidden 添加到将隐藏它的 "loading element" 中。您可以自定义 classes 以实现其他类型的动画。例如，现在动画设置为运行 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>

然后将其固定并填充100% CSS:

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

所以，现在您将标语元素置于其他所有元素之上。您需要做的最后一件事是在 3 秒后淡出该元素。这可以通过 jQuery 轻松实现，例如：

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

仅此而已

Answer 3

我使用 CSS3 keyframes/animation.

制作了一个仅 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;
}

Fiddle: https://jsfiddle.net/9z6ow28m/

加载页面显示三秒

loading page shows for three seconds

javascript

jquery

loading