Difference between revisions of "Team:Nanjing-China/CSS:loader"

Line 129: Line 129:
 
#for_judge ul a#on{ background:rgba(120,153,255,0.7); width:120px; height:70px;
 
#for_judge ul a#on{ background:rgba(120,153,255,0.7); width:120px; height:70px;
 
}
 
}
−
#HQ_page .word{text-indent:2em;}
+
#HQ_page .word p{text-indent:2em;}

Revision as of 23:45, 17 October 2018

  1. loader {
               position: fixed;
               width: 100%;
               height:100%;
               z-index: 20;

display:block; background-color:rgba(255,255,255,0.5); 

           }

.spinner { 

 margin: 150px auto;
 width: 100px;
 height: 100px;

position: relative; } .container1 > div, .container2 > div, .container3 > div { 

 width: 30px;
 height: 30px;
 background-color: #333;
 border-radius: 100%;
 position: absolute;
 -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
 animation: bouncedelay 1.2s infinite ease-in-out;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;

} .spinner .spinner-container { 

 position: absolute;
 width: 100%;
 height: 100%;

} .container2 { 

 -webkit-transform: rotateZ(45deg);
 transform: rotateZ(45deg);

} .container3 { 

 -webkit-transform: rotateZ(90deg);
 transform: rotateZ(90deg);

} .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { 

 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;

}

.container3 .circle1 { 

 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;

} .container1 .circle2 { 

 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;

} .container2 .circle2 { 

 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;

} .container3 .circle2 { 

 -webkit-animation-delay: -0.7s;
 animation-delay: -0.7s;

} .container1 .circle3 { 

 -webkit-animation-delay: -0.6s;
 animation-delay: -0.6s;

} .container2 .circle3 { 

 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;

} .container3 .circle3 { 

 -webkit-animation-delay: -0.4s;
 animation-delay: -0.4s;

} .container1 .circle4 { 

 -webkit-animation-delay: -0.3s;
 animation-delay: -0.3s;

} .container2 .circle4 { 

 -webkit-animation-delay: -0.2s;
 animation-delay: -0.2s;

} .container3 .circle4 { 

 -webkit-animation-delay: -0.1s;
 animation-delay: -0.1s;

} @-webkit-keyframes bouncedelay { 

 0%, 80%, 100% { -webkit-transform: scale(0.0) }
 40% { -webkit-transform: scale(1.0) }

} @keyframes bouncedelay { 

 0%, 80%, 100% {
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 40% {
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }

}

  1. for_judge{

position:fixed; left:5px; top:80%; width:120px; height:70px; line-height:70px; z-index:6; padding:2px; alignment-adjust: central; background-image:url("T--Nanjing-China--for-judge.png"); background-repeat:no-repeat; background-position:center; border:rgba(153,153,153,1) 3px groove; border-radius:8px; }

  1. for_judge .i ul{ margin: auto; padding:0; list-style:none; width:120px; height:70px; line-height:70px; text-align:center; float:left;}
  2. for_judge .i ul a:hover{ background:rgba(102,51,0,0.6);color:#FFFFFF; height:70px; padding:0px; line-height:70px; }
  3. for_judge .i ul a{ text-decoration:blink; color:#C93; font-family:"Courier New", Courier, monospace; height:70px; padding:0px; line-height:70px; }
  4. for_judge ul{

margin: auto; padding:0; list-style:0; background:rgba(204,153,255,0); text-align:center; float:left; list-style:0;}

  1. for_judge ul a{

text-decoration: none; display:block; color:#003; }

  1. for_judge ul a:hover{ background:rgba(255,51,102,0.5); color:#FFFFFF; width:120px; height:70px; font-family: "Comic Sans MS", cursive;}
  2. for_judge ul a#on{ background:rgba(120,153,255,0.7); width:120px; height:70px;

}

  1. HQ_page .word p{text-indent:2em;}