遮罩层的实现 -- "正在加载......" 效果

最新推荐文章于 2022-11-17 15:01:45 发布

哈兜king

最新推荐文章于 2022-11-17 15:01:45 发布

阅读量1.5k

点赞数

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/iscodeboy/article/details/23853645

版权

本文介绍了如何利用CSS创建一个显示'正在加载...'的遮罩层效果，重点探讨了z-index属性在层叠上下文中的应用，指导读者实现加载动画的视觉呈现。

摘要由CSDN通过智能技术生成

参考：Css 的 z-index 属性

实现：

<!doctype html>
<html>
<head>
	<title>遮罩层</title>
	<meta charset="utf-8" />
<style>
	#cover{
		display:none; 
		position:fixed;
		z-index:1;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, 0.44);
	}
	
	#coverShow{
		display:none;
		position:fixed;
		z-index:2;
		top:50%;
		left:50%;
		border:1px solid #127386;
		width:300px;
		height:100px;
		margin-left:-150px;
		margin-top:-150px;
		background:#127386;
	}
</style>

<script>
	function clickfunc()
	{
		alert("clicked, 遮住之前’测试‘按钮是起作用的");
	}
	function coverit()
	{
		var cover = document.getElementById("cover");
		var covershow = document.getElementById("coverShow");
		
		cover.style.display = 'blo