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

Question

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

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

我见过的代码只给出类似的东西

100% {
    opacity: 0;
  }

Answer 1

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

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

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

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

animation-delay: 2s;

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