概述
遮罩层
<link rel="stylesheet" href="//at.alicdn.com/t/font_468714_r2clynau45fxn7b9.css">
<style type="text/css">
.loading{
position: fixed;
top: 0;
background: rgba(0,0,0,.5);
height: 100%;
width: 100%;
display: none;
}
@keyframes btnRotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
@-webkit-keyframes btnRotate {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
}
}
.loading>i {
font-size: 46px;
color: #FFF;
display: inline-block;
position: fixed;
top: 40%;
left: 50%;
margin-left: -30px;
margin-top: -30px;
transform-origin:50% 50%;
animation:btnRotate 2s linear infinite;
-webkit-animation:btnRotate 2s linear infinite;
}
.laod_text{
position: fixed;
top: 34%;
left: 40%;
margin-left: -30px;
margin-top: -30px;
transform-origin: 50% 50%;
color: white;
}
</style>
<!--body中 随便放个位置-->
<div class="loading"><i class="iconfont icon-loading"></i><div class="laod_text">提交中，请稍后！</div>
<!--
JS-->
$(".loading").show();
$(".loading").hide();
最后
以上就是忧虑春天为你收集整理的移动端通用遮罩层的全部内容，希望文章能够帮你解决移动端通用遮罩层所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复