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 加载，但那是另一个话题：

Defined timing for html pre-loader