css给div添加加载中遮罩层样式 

  1 .loading:before {
  2     content: "";
  3     display: block;
  4     background: rgba(255, 255, 255, 0.5);
  5     width: 100%;
  6     height: 100%;
  7     position: absolute;
  8     top: 0;
  9     left: 0;
 10     z-index: 99;
 11 }
 12 
 13 .loading:after {
 14     content: "";
 15     display: block;
 16     width: 1em;
 17     height: 1em;
 18     border-radius: 50%;
 19     font-size: 40px;
 20     text-indent: -9999em;
 21     -moz-transform: translateZ(0);
 22     -ms-transform: translateZ(0);
 23     -o-transform: translateZ(0);
 24     -webkit-transform: translateZ(0);
 25     transform: translateZ(0);
 26     animation: loader 1.7s infinite ease;
 27     position: absolute;
 28     left: 50%;
 29     top: 50%;
 30     margin-left: -.5em;
 31     margin-top: -.5em;
 32     z-index: 100;
 33 }
 34 
 35 @-moz-keyframes loader {
 36     0% {
 37         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 38         -webkit-transform: rotate(0);
 39         transform: rotate(0);
 40     }
 41     5%, 95% {
 42         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 43     }
 44     10%, 59% {
 45         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.087em -0.825em 0 -0.42em #1e88e5, -0.173em -0.812em 0 -0.44em #1e88e5, -0.256em -0.789em 0 -0.46em #1e88e5, -0.297em -0.775em 0 -0.477em #1e88e5;
 46     }
 47     20% {
 48         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.338em -0.758em 0 -0.42em #1e88e5, -0.555em -0.617em 0 -0.44em #1e88e5, -0.671em -0.488em 0 -0.46em #1e88e5, -0.749em -0.34em 0 -0.477em #1e88e5;
 49     }
 50     38% {
 51         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.377em -0.74em 0 -0.42em #1e88e5, -0.645em -0.522em 0 -0.44em #1e88e5, -0.775em -0.297em 0 -0.46em #1e88e5, -0.82em -0.09em 0 -0.477em #1e88e5;
 52     }
 53     100% {
 54         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 55         -webkit-transform: rotate(360deg);
 56         transform: rotate(360deg);
 57     }
 58 }
 59 
 60 @-webkit-keyframes loader {
 61     0% {
 62         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 63         -webkit-transform: rotate(0);
 64         transform: rotate(0);
 65     }
 66     5%, 95% {
 67         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 68     }
 69     10%, 59% {
 70         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.087em -0.825em 0 -0.42em #1e88e5, -0.173em -0.812em 0 -0.44em #1e88e5, -0.256em -0.789em 0 -0.46em #1e88e5, -0.297em -0.775em 0 -0.477em #1e88e5;
 71     }
 72     20% {
 73         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.338em -0.758em 0 -0.42em #1e88e5, -0.555em -0.617em 0 -0.44em #1e88e5, -0.671em -0.488em 0 -0.46em #1e88e5, -0.749em -0.34em 0 -0.477em #1e88e5;
 74     }
 75     38% {
 76         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.377em -0.74em 0 -0.42em #1e88e5, -0.645em -0.522em 0 -0.44em #1e88e5, -0.775em -0.297em 0 -0.46em #1e88e5, -0.82em -0.09em 0 -0.477em #1e88e5;
 77     }
 78     100% {
 79         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 80         -webkit-transform: rotate(360deg);
 81         transform: rotate(360deg);
 82     }
 83 }
 84 
 85 @keyframes loader {
 86     0% {
 87         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 88         -webkit-transform: rotate(0);
 89         transform: rotate(0);
 90     }
 91     5%, 95% {
 92         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
 93     }
 94     10%, 59% {
 95         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.087em -0.825em 0 -0.42em #1e88e5, -0.173em -0.812em 0 -0.44em #1e88e5, -0.256em -0.789em 0 -0.46em #1e88e5, -0.297em -0.775em 0 -0.477em #1e88e5;
 96     }
 97     20% {
 98         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.338em -0.758em 0 -0.42em #1e88e5, -0.555em -0.617em 0 -0.44em #1e88e5, -0.671em -0.488em 0 -0.46em #1e88e5, -0.749em -0.34em 0 -0.477em #1e88e5;
 99     }
100     38% {
101         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, -0.377em -0.74em 0 -0.42em #1e88e5, -0.645em -0.522em 0 -0.44em #1e88e5, -0.775em -0.297em 0 -0.46em #1e88e5, -0.82em -0.09em 0 -0.477em #1e88e5;
102     }
103     100% {
104         box-shadow: 0 -0.83em 0 -0.4em #1e88e5, 0 -0.83em 0 -0.42em #1e88e5, 0 -0.83em 0 -0.44em #1e88e5, 0 -0.83em 0 -0.46em #1e88e5, 0 -0.83em 0 -0.477em #1e88e5;
105         -webkit-transform: rotate(360deg);
106         transform: rotate(360deg);
107     }
108 }

 

posted @ 2025-01-15 15:30  余-先生  阅读(163)  评论(0)    收藏  举报