Question

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

Answer 1

这适用于setTimeout()。在3000毫秒之后，我们将类hidden添加到＆＃34;加载元素＆＃34;那将隐藏它。您可以自定义类以实现其他类型的动画。例如，现在动画设置为运行500毫秒。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果你喜欢普通的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;
}

所以，现在你已经将tagline元素放在其他所有元素之上了。你需要做的最后一件事是在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/

加载页面显示三秒钟

3 个答案: