background-color: rgb(0, 0, 0,0.5);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Counterrotation</title>
<style>
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgb(0, 0, 0,0.5);
z-index: 9888;
transition: all 1s;
display: none
}
.qmdot {
height: 160px;
width: 160px;
box-sizing: border-box;
position: absolute;
left: 40%;
top: 32%;
}
.qmdot:before {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgb(71,207, 46,115);
filter:Alpha(opacity=50);
box-sizing: border-box;
margin-top: -15px;
opacity: 1;
-webkit-animation: before 2s ease-in infinite;
animation: before 2s ease-in infinite;
}
.qmdot:nth-of-type(1) {
-webkit-transform: rotate(25.7142857143deg);
transform: rotate(25.7142857143deg);
}
.qmdot:nth-of-type(1):before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
.qmdot:nth-of-type(2) {
-webkit-transform: rotate(51.4285714286deg);
transform: rotate(51.4285714286deg);
}
.qmdot:nth-of-type(2):before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.qmdot:nth-of-type(3) {
-webkit-transform: rotate(77.1428571429deg);
transform: rotate(77.1428571429deg);
}
.qmdot:nth-of-type(3):before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.qmdot:nth-of-type(4) {
-webkit-transform: rotate(102.8571428571deg);
transform: rotate(102.8571428571deg);
}
.qmdot:nth-of-type(4):before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.qmdot:nth-of-type(5) {
-webkit-transform: rotate(128.5714285714deg);
transform: rotate(128.5714285714deg);
}
.qmdot:nth-of-type(5):before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.qmdot:nth-of-type(6) {
-webkit-transform: rotate(154.2857142857deg);
transform: rotate(154.2857142857deg);
}
.qmdot:nth-of-type(6):before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.qmdot:nth-of-type(7) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.qmdot:nth-of-type(7):before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.qmdot:nth-of-type(8) {
-webkit-transform: rotate(205.7142857143deg);
transform: rotate(205.7142857143deg);
}
.qmdot:nth-of-type(8):before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.qmdot:nth-of-type(9) {
-webkit-transform: rotate(231.4285714286deg);
transform: rotate(231.4285714286deg);
}
.qmdot:nth-of-type(9):before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.qmdot:nth-of-type(10) {
-webkit-transform: rotate(257.1428571429deg);
transform: rotate(257.1428571429deg);
}
.qmdot:nth-of-type(10):before {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.qmdot:nth-of-type(11) {
-webkit-transform: rotate(282.8571428571deg);
transform: rotate(282.8571428571deg);
}
.qmdot:nth-of-type(11):before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.qmdot:nth-of-type(12) {
-webkit-transform: rotate(308.5714285714deg);
transform: rotate(308.5714285714deg);
}
.qmdot:nth-of-type(12):before {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.qmdot:nth-of-type(13) {
-webkit-transform: rotate(334.2857142857deg);
transform: rotate(334.2857142857deg);
}
.qmdot:nth-of-type(13):before {
-webkit-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.qmdot:nth-of-type(14) {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.qmdot:nth-of-type(14):before {
-webkit-animation-delay: -1.4s;
animation-delay: -1.4s;
}
@-webkit-keyframes wrapper {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes wrapper {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes before {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
5% {
-webkit-transform: scale(1);
transform: scale(1);
}
45% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
}
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
}
55% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacty: 0.8;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes before {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
5% {
-webkit-transform: scale(1);
transform: scale(1);
}
45% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
}
50% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacity: 0.8;
}
55% {
-webkit-transform: scale(0.4);
transform: scale(0.4);
opacty: 0.8;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
</style>
<script src="jquery-3.4.0.min.js"></script>
</head>
<body >
<button id="test" > Loading</button>
<button id="test1" > out</button>
<div class="mask">
<div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div>
<div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div><div class='qmdot'></div>
</div>
<script>
$(".mask").fadeIn();
document.getElementById("test").onclick=function(){
$(".mask").fadeIn();
}
document.getElementById("test1").onclick=function(){
$(".mask").fadeOut();
}
</script>
</body>
</html>