最近开发了一套jquery遮罩效果,由于从来没总结过,所以还得现写。代码如下:
1.css代码
.mask-layer {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,.2);
z-index: 999;
}
.waiting-icon {
width: 25px;
height: 25px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1000;
}
.waiting-icon span {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
margin-right: 13px;
-webkit-animation: spin 1s linear 0s infinite normal;
-o-animation: spin 1s linear 0s infinite normal;
-moz-animation: spin 1s linear 0s infinite normal;
-ms-animation: spin 1s linear 0s infinite normal;
animation: spin 1s linear 0s infinite normal;
position: relative;
z-index: 10000;
}
@keyframes spin {
0% {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); }
100% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@-webkit-keyframes spin {
0% {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); }
100% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@-moz-keyframes spin {
0% {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); }
100% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@-ms-keyframes spin {
0% {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); }
100% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@-o-keyframes spin {
0% {
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); }
100% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
2.html代码片段
<div id="loadingLayer" class="mask-layer" style="display:none;">
<div class="waiting-icon">
<span> <img src="<%=context%>/images/icon.png" /></span>
</div>
</div>
3.jquery启动遮罩代码
$("#loadingLayer").show();
4.最后效果如下: