Question

我正在尝试将此codepen实现到html页面中。我们的想法是，在页面上的所有内容加载后，它会消失。这就是我现在所拥有的。

HTML

<div class="js">
<body>
<div id="preloader"></div>
<!-- WEBSITE -->
</body>
</div>
</html>

（ * ALERT：关闭body元素后，您无法尝试关闭div标签* ） CSS

很多CSS所以我把它放在codepen

上

JQUERY

jQuery(document).ready(function($) {


  $(window).load(function() {
    $('#preloader').fadeOut('slow', function() {
      $(this).remove();
    });
  });

});

所以它似乎工作正常，除了我似乎无法弄清楚紫色背景。微调器工作得很好但是如果我将background: #774CFF;放在.js div#preloader中，它不会覆盖整个页面的紫色，只能在微调器内。

Answer 1

您在background-color上分配#preloader，其宽度和高度均为30px。因此，您可以将background-color应用于body

body{
  background-color:#774CFF;
}

要么用另一个元素包裹#preloader并将其拉伸以适应屏幕：

HTML

<div id="preloader-wrapper">
  <div id="preloader">
  </div>
</div>

CSS

#preloader-wrapper{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:#774CFF;
}

在html

1 个答案: