0

Мне нужно чтобы когда я перезагружаю страницу вся она становилась чёрной а потом спустя пару секунд этот слой отъезжал вверх при этом нажимать не куда не нужно.

Вот css код

.animation-block{
    background-color: black;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
}
.animation-block:hover{
  background-color: black;
  height: 100vh;
  width: 100%;
  
  z-index: 9999;
  top:-100%;
}
3
  • А вам как нужно, чтобы слой уже сразу существовал, или сделать его появление? А если сделать появление, то какое? Нужно чтобы блок сам отъезжал на вверх или пользователь что-то сделал?
    – ΝNL993
    2 мар в 19:33
  • @ΝNL993 уже решил, спасибо
    – user542872
    2 мар в 20:19
  • Можете опубликовать решение тут, на Stack Overflow, если кто вдруг столкнётся с такой же проблемой, то будет решение.
    – ΝNL993
    2 мар в 21:07

2 ответа 2

0

Чтобы реализовать описанное вами поведение, вам нужно использовать JavaScript для добавления класса к элементу с классом "animation-block" при загрузке страницы, а затем удалять этот класс через определенное время, чтобы слой отъезжал вверх.

В CSS вы можете добавить стили для класса "active", которые будут устанавливать нужные свойства для анимации.

Вот пример кода на JavaScript, который можно использовать:

window.onload = function() {
  var animationBlock = document.querySelector('.animation-block');
  animationBlock.classList.add('active');
  setTimeout(function() {
    animationBlock.classList.remove('active');
  }, 2000); // время в миллисекундах до удаления класса
}
.animation-block.active {
  background-color: black;
  height: 100vh;
  width: 100%;
  z-index: 9999;
  top:-100%;
  transition: top 1s ease-in-out;
}

0

Рабочий вариант без лишних скриптов при помощи animation. Расписывать, как он работает не буду, слишком долго. Только скажу, что 1s - скорость движения вверх, а 5s - это задержка перед началом движения, а forwards отвечает за то, что элемент не будет возвращаться обратно на исходную позицию.

.animation-block{
    background-color: black;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    animation: topAfterDelay 1s 5s forwards;
}
body {
  margin: 0;
  box-sizing: border-box;
}
@keyframes topAfterDelay {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
<div class="animation-block"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.