CSS3 预加载器代码不显示背景颜色答案

【问题标题】：CSS3 Preloader Code Not Showing Background ColorCSS3 预加载器代码不显示背景颜色
【发布时间】：2019-01-19 22:42:46
【问题描述】：

我正在为我的网站使用 CSS3 设计的预加载器。

#preloader
    {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

@-webkit-keyframes moveup
    {
      0%, 60%, 100%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
          }
      25%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
          }
    }
@keyframes moveup
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            }
    }
@-webkit-keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }
@keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }

.layer
    {
        display: block;
        position: absolute;
        height: 3em;
        width: 3em;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
              transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
    }
.layer:nth-of-type(1)
    {
        background: #534a47;
        margin-top: 1.5em;
        -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
              animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
    }
.layer:nth-of-type(1):before
    {
        content: '';
        position: absolute;
        width: 85%;
        height: 85%;
        background: #37332f;
    }
.layer:nth-of-type(2)
    {
        background: #5a96bc;
        margin-top: 0.75em;
    }
.layer:nth-of-type(3)
    {
        background: rgba(255, 255, 255, 0.6);
        -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
              animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
    }

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
    <!--  THEME PRELOADER AREA -->
    <div id="preloader">
        <i class='layer'></i>
        <i class='layer'></i>
        <i class='layer'></i>
    </div>
    <div class="wrapper">
       Hi this is a demo content
    </div>
 </body>
</html>

我在使用这段代码时遇到的问题是，预加载器在站点加载时是可见的，其内容是 HTML 格式的。

即我想要带有背景白色的预加载器，这样无论 HTML 页面正在加载它都不可见。在当前场景中，预加载器也是可见的，背景 HTML 页面也是可见的。我想通过给 prealoder div 一个背景颜色来隐藏背景图像页面，这样它就不会在后面显示任何东西。

谁能帮我解决这个问题？

我编写了 JS 代码来删除加载页面的预加载器。我唯一遇到的问题是加载时背景内容的可见性。

【问题讨论】：

标签： html css css-transitions css-animations preloader

【解决方案1】：

从定位固定的#preloader 添加一个包装器。给它一个背景色，你就完成了！

.preloader-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: none;
    width: 100%;
    height: 100%;
    background: #FFF;
}
#preloader {
    position: absolute;
    top: 0;
    left: 0;;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 3em;
    width: 3em;
}

@-webkit-keyframes moveup
    {
      0%, 60%, 100%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
          }
      25%
          {
            -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
          }
    }
@keyframes moveup
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            }
    }
@-webkit-keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }
@keyframes movedown
    {
        0%, 60%, 100%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            }
        25%
            {
                -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
                transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            }
    }

.layer
    {
        display: block;
        position: absolute;
        height: 3em;
        width: 3em;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
        -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
              transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
    }
.layer:nth-of-type(1)
    {
        background: #534a47;
        margin-top: 1.5em;
        -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
              animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
    }
.layer:nth-of-type(1):before
    {
        content: '';
        position: absolute;
        width: 85%;
        height: 85%;
        background: #37332f;
    }
.layer:nth-of-type(2)
    {
        background: #5a96bc;
        margin-top: 0.75em;
    }
.layer:nth-of-type(3)
    {
        background: rgba(255, 255, 255, 0.6);
        -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
              animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
    }

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
    <!--  THEME PRELOADER AREA -->
    <div class="preloader-main">
      <div id="preloader">
          <i class='layer'></i>
          <i class='layer'></i>
          <i class='layer'></i>
      </div>
    </div>
    Hi this is a demo content
 </body>
</html>

【讨论】：

PS 我修改了我的问题 HTML 部分，加载器工作正常，但加载时背景仍然可见
看我的代码兄弟，你需要制作一个包装器 .preloader-main 并将#preloader放入其中。该包装器将是 100% 的高度和宽度

【解决方案2】：

必须在预加载器元素上设置背景颜色，但它没有尺寸。

将其设置为 100% 的宽度和高度以覆盖整个屏幕，并删除样式使其居中，不再需要它们。

现在，我们需要在预加载中将层元素居中。使用 left 和 top 50% 执行此操作。

附带说明，不再需要 webkit 前缀。

#preloader {
  position: absolute;
  background-color: yellow;
  width: 100%;
  height: 100%;
}


@keyframes moveup {
  0%,
  60%,
  100% {
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
  }
}

@keyframes movedown {
  0%,
  60%,
  100% {
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
  }
}

.layer {
  display: block;
  position: absolute;
  height: 3em;
  width: 3em;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
  transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
  left: 50%;
  top: 50%;
}

.layer:nth-of-type(1) {
  background: #534a47;
  margin-top: 1.5em;
  animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
}

.layer:nth-of-type(1):before {
  content: '';
  position: absolute;
  width: 85%;
  height: 85%;
  background: #37332f;
}

.layer:nth-of-type(2) {
  background: #5a96bc;
  margin-top: 0.75em;
}

.layer:nth-of-type(3) {
  background: rgba(255, 255, 255, 0.6);
  animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}

<div id="preloader">
  <i class='layer'></i>
  <i class='layer'></i>
  <i class='layer'></i>
</div>

【讨论】：

以上代码是将背景设置为全身，而不是预加载器部分。请访问www.stackmantle.com希望你能明白我想说什么。

【解决方案3】：

希望我能正确理解这个问题，你可以用简单的js来做这个：

像这样改变你的html：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <?php include("meta_css.php"); ?>
</head>
<body>
    <section>
     <div id="content">Page Loaded!</div>
    </section>
    <div id="preloader">
        <i class='layer'></i>
        <i class='layer'></i>
        <i class='layer'></i>
    </div>

 </body>
</html>

为内容添加 css：

#content{
 display:none; 
}

首先，准备 FadeIn 和 FadeOut 函数：

function fadeOutEffect(target) {
    var fadeTarget = document.getElementById(target);
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        }else {
            clearInterval(fadeEffect);
            fadeTarget.style.display="none";
        }
    }, 40);
}

function fadeInEffect(target) {
    var fadeTarget = document.getElementById(target);
    fadeTarget.style.display="block";
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 0.1;
        }
        if (fadeTarget.style.opacity < 1) {
            fadeTarget.style.opacity=parseFloat(fadeTarget.style.opacity) + 0.1;
        }else {
            clearInterval(fadeEffect);
        }
    }, 40);
}

然后，将其添加到您的 onLoad

fadeOutEffect("preloader");
fadeInEffect("content");

这里正在工作fiddle

【讨论】：

但是当预加载器存在时它仍然没有隐藏BG内容。
实际上，我在看到www.stackmantle.com 示例后编辑了我的答案。问题更清楚了。