HTML遮罩层，背景半透明 css 动态加载

最新推荐文章于 2024-06-20 23:28:37 发布

灯初上夜未央

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量967

点赞数

本文链接：https://blog.csdn.net/ZhaoLonghuiyuan/article/details/80590721

版权

css 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

动态加载

1 篇文章 0 订阅

订阅专栏

html

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML遮罩层，背景半透明 css 动态加载</title>
<style>
#msgDetail {
z-index:10001;
margin: 100px auto;
width: 80px;
height: 90px;
text-align: center;
font-size: 10px;
display: none;
}
#bgDiv {
display: none;
position: absolute;
top: 0px;
left: 0px;
right:0px;
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.2;
}

.spinner {
margin: 100px auto;
width: 80px;
height: 90px;
text-align: center;
font-size: 10px;
}

.spinner > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
<script type="text/javascript" language="javascript">
function showDetail(){//show detail
var msgDetail = document.getElementById("msgDetail");
var bgDiv = document.getElementById("bgDiv");
bgDiv.style.width = document.body.offsetwidth + "px";
bgDiv.style.height = window.innerHeight + "px";

msgDetail.style.display = bgDiv.style.display = "block";
var msgDetail = document.getElementById("msgDetail");
}
</script>
</head>

<body>
<p><a href="#" onClick="showDetail()">点击</a></p>
<div id="msgDetail">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div style="width: 140px;margin: -80px 0 0 -20px;font-size:16px;">上传中耐心等待...</div>
</div>

<div id="bgDiv" style="overflow-y: hidden;"></div> 

</body>
</html>

灯初上夜未央

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML遮罩层，背景半透明 css 动态加载

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;me
复制链接

扫一扫

专栏目录