如何获得此加载屏幕效果

Question

如何在我的网页中获得这种初始加载效果。我正在使用 bootstrap4 和 javascript。我是 JavaScript 新手Template Link

Answer 1

在所有其他东西之上创建一些元素，然后在文档上做一些准备取出元素

样本：

jQuery(document).ready(function(){
  jQuery('.overlay-load').addClass('away');
  jQuery('.overlay-aux-bg').addClass('away');
});

.overlay-load {
position: fixed;
z-index: 10;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: darkorange;
transition-duration: 500ms;
transition-delay: 2.5s;
}
.overlay-load.away {
transform: translateY(-100%);
}
.overlay-aux-bg {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #3c3c3c;
transition-duration: 500ms;
transition-delay: 1.5s;
}
.overlay-aux-bg.away {
transform: translateY(-100%);
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 2em;
text-shadow: 0 1px 1px #bbb,
		0 2px 0 #999, 
		0 3px 0 #888, 
		0 4px 0 #777, 
		0 5px 0 #666, 
		0 6px 0 #555, 
		0 7px 0 #444, 
		0 8px 0 #333, 
		0 9px 7px #302314;
}
.page-content {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
}
.content-sample-format {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-load">
<div class="overlay-aux-bg">
<div class="overlay-text">
Load Screen Text
</div>
</div>
</div>
<div class="page-content">
<div class="content-sample-format">
<h1>Page title</h1>
<p>Page content to show the page in action haha </p>
</div>
</div>

它只是一点点 js 和 css 的混合。 最好只用js给元素加class，也可以做一个timeout函数来延迟class的加，但是当你可以做transition delay的时候，为什么还要这么做。 顺便说一句，这样做，为元素添加类，性能更好。