html - 定义 html 预加载器的计时

我有一个从不同站点加载 iframe 的站点。我想放置一个预加载器，在一定时间内占据整个页面，例如 10 秒等......而不是在页面加载完成时。

计划就像放置一个预加载器 10 秒，然后让它消失。忽略 iframe 是否完成加载。

我见过的代码只提供类似的内容

100% {
    opacity: 0;
  }

最佳答案

像这样让整个 body 在10秒内褪色怎么样？:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
   opacity: 1;
  }
}

body {
  -webkit-animation: fadeIn 10s;
  animation: fadeIn 10s;
}

您可以选择在开始时添加延迟:

animation-delay: 2s;

这会更好地在加载时隐藏页面，只要它可以预见地少于加载所需的时间，您最好以某种方式真正观察 iframe 加载，但那是另一个主题:

关于html - 定义 html 预加载器的计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58524777/