我正在为类做一个数据库元素，我想为它制作一个 GUI，只是为了好玩。所以，我对 HTML/CSS 不是很流利，我需要一些帮助..
我想制作一个精美的淡入/淡出消息，以确保我与数据库的连接有效。所以我在网上做了一些挖掘，发现了一个类似的帖子:
CSS how to make an element fade in and then fade out?
它在动画中工作得很好，但是一旦它淡出，所有曾经包含它的边距空间仍然分配给页面；话虽如此，是否有任何简单的方法可以删除所有不需要的空间？我将提供图片来帮助说明我希望它看起来像什么......
使用的代码:(与相关帖子基本相同，见上)
<!-- 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; }
}
最佳答案
在您的结尾 (100%):
@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
您可以添加 display: none: 来删除它占用的额外空间。您可以更进一步，在执行 display: none:
如果您还有其他问题，请告诉我:)
关于php - 动画淡出后删除边距空间 CSS/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52952979/