@keyframes не работает ожидаемым образом CSS - PullRequest
Новая
       7

@keyframes не работает ожидаемым образом CSS

0 голосов
/ 05 сентября 2018



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

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <title>Coming Soon</title>
</head>
<body>
  <div class="background">
      <h2 class="logo">Logo</h2>
      <div class="dropdownwrapper">
        <h1 class="bigtext">Coming Soon</h1>
      </div>
      <hr class="divider">
      <h4 class="smalltext">35 days left</h4>
  </div>
</body>
</html>

styles.css 

  body {
  background-color: white;
  font-size: 10px;
}

.background {
  animation-name: fadeout;
  animation-duration: .8s;
  background-image: url(Images/forestbridge.jpg);
  background-size: cover;
  background-position: top;
  animation-fill-mode: backwards;
  height: 100vh;
  font-family: "Raleway", sans-serif;
}

.logo {
  color: white;
  font-weight: 100;
  font-size: 1.5rem;
  padding: 1rem 0 0 1rem;
}

.bigtext {
  color: white;
  text-transform: uppercase;
  font-size: 4rem;
  text-align: center;
  padding-bottom: 1rem;
}

.dropdownwrapper {
  animation-name: dropdown;
  animation-duration: .8s;
  animation-fill-mode: forwards;
}

.divider {
  border: none;
  width: 20%;
  height: 1px;
  background-color: lightgrey;
  margin-bottom: 1.5rem;
}

.smalltext {
  color: white;
  font-size: 1.25rem;
  text-align: center;
}


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

  100% {
    opacity: 1;
  }
}

@keyframes dropdown {
  0% {
    margin-top: 10vh;
  }

  100% {
    margin-top: 40vh;
  }
}



У меня также есть reset.css, но это просто стандартный сброс Эрика Мейера 2.0 (хотя я поместил его в коде). Моя проблема в том, что когда вы перезагружаете версию W3Schools, которую я пытаюсь перекодировать, появляется текст «СКОРО», а строка и текст «35 дней осталось» остаются на месте. Тем не менее, в моем коде весь блок текста сводится. Почему текст «СКОРО» на моем сайте не исчезает сам по себе, когда я выбрал только родительский div, в котором находятся другие элементы? Как сделать так, чтобы только текст «СКОРО» приходил?
Спасибо,
Lyfe

1 Ответ

0 голосов
/ 05 сентября 2018

Это происходит потому, что вы анимируете margin-top текста COMING SOON. Поскольку элемент находится в нормальном потоке документов , анимация поля создает впечатление, что элементы после COMING SOON также анимируются, даже если это не так. Чтобы решить эту проблему, вы должны анимировать, используя transform, который манипулирует позицией элемента in place. Проверьте раздвоенный кодекс .

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

Эффект сползания вниз кажется более глубоким во втором коде.

...