【发布时间】：2021-07-09 16:01:30
【问题描述】：
我正在尝试制作加载屏幕，因为我正在使用 PHP 为我正在制作的这个网站动态引入特定服务，并且我尝试在我的包装 div 上使用 height: 100% ，但它不起作用。我尝试了 height: 100vh 但显然它只占用了 100% 的视图区域，所以我可以向下滚动并查看其他内容。
HTML
<?php include ('header.php'); ?>
</head>
<body>
<div class="background-loading">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
<div class="banner-section" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images3/heroImage.jpg);">
<h1>Services</h1>
</div>
<div class="services-section">
<div class="services">
<?php
require_once 'includes/dbh-inc.php';
$sql = "SELECT serviceName, servicePageName, serviceImage FROM addService";
$result = $conn-> query($sql);
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
echo '<div class="service-title">';
echo '<h2>'. $row["serviceName"] .'</h2>';
echo '</div>';
echo '<a href='. $row["servicePageName"] .'>';
echo '<div class="service-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['serviceImage']).')">';
echo '<h1>Click Me!</h1>';
echo '</div>';
echo '</a>';
}
}
$conn-> close();
?>
<!--
<div class="service-title">
<h2>Business Printing</h2>
</div>
<a href="businessPrinting.php">
<div class="service-container" style="background-image: url(images3/business1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Canvas Printing</h2>
</div>
<a href="canvasPrinting.php">
<div class="service-container" style="background-image: url(images3/canvas1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Custom Apperal</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/apperal1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Embroidery</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/embroidery1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Engraving</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/engraving1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Signs</h2>
</div>
<a href="signsAndBanners.php">
<div class="service-container" style="background-image: url(images3/signs1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
-->
</div>
</div>
<?php include ('footer.php'); ?>
CSS
/* Screen Loader */
.background-loading {
background-color: var(--clr-primary);
z-index: 1000;
height: 100vh;
position: sticky;
}
.wrapper{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
@keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
@keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapper span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}
【问题讨论】：