У меня такой код:

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(1000).fadeOut('slow');
    }
});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
   display: flex;
    justify-content: center;
    align-items: center;
}


.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 3s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">            
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
        <span></span>
    </div>
</div>

Я хочу добавить вокруг него небольшую рамку и лучше показать вам, какой результат я ищу, в итоге я хочу вот это:

enter image description here

Итак, все, что мне сейчас не хватает, это то, что background box с черным цветом, и я не хочу, чтобы вол был заполнен page cover, он должен быть примерно такой же высоты и ширины, как на картинке выше . Думайте об этом как о прелоадере для сайта. В центре страницы находится поле маленького / среднего размера с логотипом h, отображаемым внутри него , как показано выше.

Примечание. Анимация должна работать внутри поля и не должна выходить за его пределы, поэтому анимация при запуске вышеуказанного кода должна располагаться в черном ящике. Я просто ищу помощь, как точно установить размеры коробки, как показано на картинке. Я откорректирую измерения позже, но сейчас я ищу вывод окна, который будет отображаться.

Я пытался использовать ту же логику, что и кто-то, кто задавал аналогичный вопрос раньше, но это не сработало, и у меня появился черный экран, которого я не хочу. Я хочу, чтобы весь экран был white, но это фоновое поле изображения, как показано выше, было черным.

Ожидаемый результат:

enter image description here

Анимация должна по-прежнему отлично работать внутри окна, и, как вы можете видеть, окно находится в центре экрана, а фон экрана white.

2
HussainOmer 19 Янв 2021 в 17:53

3 ответа

Лучший ответ

Use :: before псевдо

// Preloader
$(window).on('DOMContentLoaded', function() {
  if ($('#preloader').length) {
    $('#preloader').delay(1000).fadeOut('slow');
  }
});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');



.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 2s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
#preloader {
  position: absolute;
  margin: auto;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.z-logo svg {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  display: flex;
  width: 50%;
}

.z-logo::before {
  content: "";
    top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background: black;
  position: absolute;
  display: inline-flex;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
  <div class="svg-file z-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.3 78.22Z" fill="#47AF9A"/></g></svg>
    <span></span>
  </div>
</div>
1
Burham B. Soliman 19 Янв 2021 в 15:58

Просто добавьте фон и рамку:

svg {
  background:#000;
  border:20px solid;
}

Полный код

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(1000).fadeOut('slow');
    }
});
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
   display: flex;
    justify-content: center;
    align-items: center;
}

svg {
  background:#000;
  border:20px solid;
}

.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 3s linear infinite;
}

svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">            
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
        <span></span>
    </div>
</div>
1
Temani Afif 19 Янв 2021 в 15:28

Вы устанавливаете черный фон в div .svg-file ... и масштабируете svg до 0.66 (2/3).

// Preloader
 $(window).on('DOMContentLoaded', function() {
    if ($('#preloader').length) {
      $('#preloader').delay(2000).fadeOut('slow');
    }
});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap");

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preloader .svg-file {
  background-color: black;  /* added */
  overflow: hidden;
}

#preloader .svg-file path {
  fill: transparent;
  stroke-width: 3;
  stroke: rgb(1, 36, 133);
}

#preloader .svg-file.z-logo path {
  stroke-dasharray: 550;
  stroke-dashoffset: 0;
}

#preloader .svg-file.z-logo path {
  animation: animate-zlogo 3s linear infinite;
}

#preloader svg {
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
  transform: scale(0.66);  /* Changed */
}

#preloader .svg-file h2 {
  font-family: "Roboto", cursive;
  transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
  font-size: 3em;
  color: #044d77;
}

#preloader .svg-file span {
  animation: dots 2.5s steps(6, end) infinite;
  font-size: 5em;
  display: block;
  transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
  background-color: rgb(5, 46, 80);
  width: 8px;
  height: 5px;
}
/* Not used 
@keyframes fadein-fadeout {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
*/
@keyframes animate-zlogo {
  0% {
    stroke-dashoffset: -50;
  }

  20% {
    stroke-dashoffset: 550;
    fill: transparent;
  }

  40% {
    fill: transparent;
    stroke-dashoffset: 1100;
  }

  60% {
    stroke-dashoffset: 1100;
    fill: #05f7f9;
  }

  80% {
    stroke-width: 0;
    fill: #05f7f9;
  }

  100% {
    /* stroke-dashoffset: 0; */
    stroke-width: 3;
    fill: transparent;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
  <div class="svg-file z-logo">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
      <g id="H">
        <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A" />
      </g>
    </svg>
    <span></span>
  </div>
</div>
2
Louys Patrice Bessette 19 Янв 2021 в 18:54