css 背景透明 div 不透明

最新推荐文章于 2024-04-26 19:17:54 发布

Farmwang

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量2.9k

点赞数

分类专栏： JavaScript CSS

本文链接：https://blog.csdn.net/farmwang/article/details/90272984

版权

JavaScript 同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 1 订阅

订阅专栏

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>

Farmwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css 背景透明 div 不透明

background-color: rgb(0, 0, 0,0.5);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <title>CodePen - Counterrotation</title><style> ...
复制链接

扫一扫