个人中心
gpt4 book ai didi

javascript - 如何制作一个全黑的空加载屏幕？这一直有效

转载 作者：太空宇宙 更新时间：2023-11-04 08:10:40 25 4
gpt4 key购买 nike

我一直在寻找完美的，但我在谷歌上发现的大多数都有一个问题，即有时他们能够全屏显示加载屏幕，但大多数时候，通常在边缘他们显示一部分网页加载加载屏幕后面的内容很烦人我怎么能做到这一点，因为全屏加载屏幕始终是全屏，然后显示完成的页面。例如我大部分时间在网上找到的内容。

<!DOCTYPE html>

<html>
<head>

<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">

<style>

@font-face {
    font-family: raleway;
    src: url(/0/multimedia/fonts/raleway.ttf);
}


div#load_screen{
	background: black;
	opacity: 1;
	position: fixed;
    z-index:10;
	top: 0px;
	width: 100%;
	height: 1600px;
}
div#load_screen > div#loading{
	color: white;
	width:120px;
	height:24px;
	margin: 300px auto;
font-family: raleway;
}

@media only screen 
and (min-width : 320px) 
and (max-width : 736px){ 

div#load_screen{
	opacity: 1;
	position: fixed;
    z-index:10;
	top: 0px;
	width: 100%;
	height: 1600px;
}
div#load_screen > div#loading{
	color: white;
	width:185px;
	height:24px;
	margin: 125px auto;
font-size: 240%;
font-family: raleway;
}

}




</style>


</head>


<body>

<script>
window.addEventListener("load", function(){
	var load_screen = document.getElementById("load_screen");
	document.body.removeChild(load_screen);
});

</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
<div id="load_screen"><div id="loading">LOADING</div></div>

</body>
</html>

最佳答案

试试这个属性:

div#load_screen{
    background: black;
    opacity: 1;
    position: fixed;
    z-index:10;
    top: 0px;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
}

关于javascript - 如何制作一个全黑的空加载屏幕？这一直有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46319633/

25 4 0
文章推荐： python - 无论上下文如何，NLTK 的 NgramModel 始终为单词给出相同的概率
文章推荐： python - 尝试使用 mkdir 时 Python 中的语法无效
文章推荐： python - 如何从第 n 个元素开始传递列表
文章推荐： html - 如何将链接应用到 div 或 img？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com