如何在不使用JS的情况下让预加载器消失

Question

我刚刚学习如何使用 CSS 和 HTML，但我的目标是在页面打开时制作预加载器：让 .gif 动画播放一次并消失。我正在为一个不允许脚本编写的论坛执行此操作，因此我无法设置 JS 或 jQuery 脚本。在 HTML 块中，它只是不允许我添加标签。

这也是我第一次在这个网站上提问，所以如果我不识字地填写了我的问题，我深表歉意。

我当前的代码：

HTML：

<div class="preloader">
<div class="preloader__image"></div>
</div>

CSS：

<style>
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
  z-index: 1001;
}

.preloader__image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  background: url(https://i.ibb.co/37T8DPh/Preloader-1.gif) no-repeat 50% 50%;
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}
.preloader-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>

我查看了CSS动画选项，但我要么不明白如何在.gif条件下使用它，要么根本无法完成...

Answer 1

欢迎来到 stackoverflow。

使用动画和不透明度的一种方法是...:

.preloader__image {
  animation: fadeinout 3s linear forwards;
}

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

您可以根据需要调整持续时间。 请记住，图像将保留一些空间，因为仅修改了不透明度，因此您可以使用 z-index 等。