Я работаю над проектом базы данных для класса, и я хотел создать для него графический интерфейс только для развлечения. Итак, я не очень хорошо владею HTML / CSS, и мне нужна помощь ..

Я хочу создать необычное сообщение о постепенном появлении / исчезновении, чтобы убедиться, что у меня есть рабочее соединение с моей базой данных. Итак, я покопался в Интернете и нашел похожий пост:

CSS, как заставить элемент постепенно появляться, а затем исчезать?

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

At page load After animation ends

Используемый код: (в основном такой же, как и в соответствующем сообщении, см. Выше)

<!-- dbGUI.php file -->
<!-- DATE -->
<!-- PHP -->
<?php
   $message = "";
   $con = mysqli_connect("#####","#####", "","store");
   // Check connection
   if (mysqli_connect_errno())
   {
          $message = "Failed to connect to MySQL: " . mysqli_connect_error();
          } else {
          $message = "Connected to database...";
          }
        ?>      
<!-- END PHP -->
<!-- MARKUP -- >
   <!DOCTYPE html>
   <html lang="en">
   <!-- HEADER --> 
<head>
   <meta charset="utf-8" />
   <title>Database Admin Portal</title>
   <!-- Favicon -->
   <link rel="shortcut icon" href="#" />
   <!-- CSS -->
   <link rel="stylesheet" href="dbGUI.css" />
   <!-- JAVASCRIPT -->
</head>
<!-- MAIN -->
<body>
   <header>
      <div class="elementToFadeInAndOut"><?php echo $message; ?> </div>
      <nav>
      </nav>
   </header>
   <hr>
   <main>
      <h1>HEADER 1</h1>
      <section>
         <h2>HEADER 2</h2>
         <article>
            <h3>HEADER 3</h3>
            <p>
            </p>
         </article>
      </section>
   </main>
   <hr>
   <!-- FOOTER -->
   <footer>
   </footer>
</body>
</html>

    body
{
    padding: 10px;
    font-size:16pt;
    font-family: Calibri;
}

Файл CSS:

.elementToFadeInAndOut {
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
  width: 0px;
  height: 0px;
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
0
Julia 23 Окт 2018 в 18:40

2 ответа

Лучший ответ

В конце (100%) вашего:

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

Вы можете добавить display: none:, чтобы удалить лишнее пространство, которое он занимал. Вы можете сделать еще один шаг и добавить еще один переход, прежде чем делать display: none:

Позвольте мне знать, если у вас есть еще вопросы :)

1
kcvan 23 Окт 2018 в 19:47

display: none;, когда вы закончите анимацию, скроет ее из DOM и удалит все занимаемое пространство.

opacity сделает его прозрачным, но все равно займет все пространство, которое занимало, когда было видно.

Несколько интересных ссылок для вас:

CSS "Отображение: нет;" свойство

Есть ли противоположность отображению: нет?

1
Dammeul 23 Окт 2018 в 15:46
52952979