如何在页面加载之前创建欢迎动画屏幕？
Posted
技术标签:
【中文标题】如何在页面加载之前创建欢迎动画屏幕？【英文标题】：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”文件的脚本？
如果是这样， 我该怎么做？
非常感谢。
【问题讨论】：
【参考方案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 文本的内容
”会出现以上是关于如何在页面加载之前创建欢迎动画屏幕？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Materialise 线性不确定进度条作为页面预加载器？