如何在页面加载之前创建欢迎动画屏幕？答案

【问题标题】：how to create welcome animation screen before page loads?如何在页面加载之前创建欢迎动画屏幕？
【发布时间】：2021-08-13 11:37:44
【问题描述】：

我有一个基于 html 的网站，以常规的“index.html”作为主页，是否可以加载动画，然后在动画循环结束后加载 index.html？

我不需要一个复杂的解决方案来保持动画运行直到页面完成加载.. 我只需要动画循环播放直到结束然后加载页面.. 你能为我找到的最简单的解决方案会很棒。

也许您在“index.html”中添加了 javascript 代码，告诉“index.html”在页面的其余部分加载之前加载“.gif”文件？

还是告诉“index.html”在加载其余“index.html”之前加载包含欢迎屏幕代码和动画的“.js”文件的脚本？

如果是这样，我该怎么做？

非常感谢。

【问题讨论】：

标签： javascript html animation gif

【解决方案1】：

为动画创建一个带有 display:block 的 div
用你的最终内容创建一个 div，添加一个 display:none 来隐藏
添加一些js

window.onload=()=>{document.querySelector('#animation').style.display='none'; document.querySelector('#content').style.display='block'; }

【讨论】：

【解决方案2】：

您只能使用动画来实现这一点。请检查下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .animate{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: green;
    animation: animate 10s forwards; /*Control the time like 10s (10 seconds) or 2s as required*/
}

@keyframes animate {
    0%{
        background: yellow;
    }
    50%{
        background: red;
    }
    100%{
        background: green;
    }
}
    </style>
</head>
<body>
    <div><h1>Body text</h1></div>
      <div class="animate">
        <button class="continue">Continue</button>
     </div>
     <script>
      let animate_div = document.querySelector(".animate");
      let continue_button = document.querySelector(".continue");

      continue_button.addEventListner('click', function(e){
        animate_div.style.visibility = 'hidden';
      });
     </script>
</body>
</html>

【讨论】：

我的 index.html 里面已经有 div，我怎么能确定这个 div 会首先加载，并且在动画完成之前会高于所有其他内容？它应该有“z-index”所以该层将高于所有其他层？不是吗？
是的，如果任何其他 div 有 position:absolute ，你可以使用 z-index
背景动画完成后，页面上仍然可以看到
的内容.. i
的内容到动画完成后消失。
好的，设置可见性：100%隐藏
好的，现在可以了！最后一个问题：是否有一个选项可以在页面上创建一个按钮，使点击时 100% 隐藏？而不是页面自动执行？我的意思是在动画加载之后，而不是运行“可见性：隐藏；”，我想要一个带有“继续访问网站”等文本的按钮，当用户单击它时，“
Body 文本的内容
”会出现

Body 文本的内容