CSS3 Preloader Code не показывает цвет фона - PullRequest
Новая
       12

CSS3 Preloader Code не показывает цвет фона

0 голосов
/ 20 января 2019

Я использую CSS3 Preloader для моего сайта. 

#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 цвета фона, чтобы он ничего не отображал.

Может кто-нибудь помочь мне с этим?

У меня есть код JSнаписано, чтобы удалить предварительный загрузчик, одна страница загружена.Единственное, в чем я застрял - это видимость содержимого фона при загрузке.

Ответы [ 3 ]

0 голосов
/ 20 января 2019

Цвет фона должен быть установлен на элементе preloader, но он не имеет размера.

Установите его на 100% ширину и высоту, чтобы покрыть весь экран, и удалите стиль, чтобы он был центрирован, онибольше не нужны.

Теперь нам нужно центрировать элементы слоя внутри предварительной загрузки.Сделайте это, используя левый и верхний 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>
0 голосов
/ 21 января 2019

Добавлена ​​оболочка из #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>
0 голосов
/ 20 января 2019

Надеюсь, я правильно понял вопрос, вы можете сделать это с помощью простого 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");

Здесь работает Скрипка

...