html,body{width:100%;height:100%;margin:0;overflow: hidden;background-color:#000000;}
*{margin:0px;padding:0px}
@font-face {font-family: 'xzzt';src: url('../font/xzzt.woff') format('truetype');}
canvas {position: absolute;z-index:0}
.mp3{width:0px;height:0px;}
.box1{width:300px;height:300px;position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;z-index:1;}
.warp{width:300px;height:300px;border-radius:50%;margin:0px auto;animation:test 18s linear infinite;position:absolute}
.dom{width:300px;height:300px;position:absolute;margin-left:-75px;margin-top:-75px;top:50%;left:50%}
.box2,.box3,.box4,.box5,.box6,.box7,.box8,.box9{text-align:center;color:#1b1b1b;font-family: "xzzt", cursive;font-size:99px;width:150px;height:150px;position:absolute;}
.yangyao1{background-color:#1b1b1b;width:150px;height:15px;margin-bottom:15px}
.yangyao2{background-color:#1b1b1b;width:150px;height:15px;margin-bottom:15px;margin-top:15px}
.yangyao3{background-color:#1b1b1b;width:150px;height:15px;margin-top:15px}
.yinyao1{height:15px;margin-bottom:15px}
.yinyao2{height:15px;margin-bottom:15px}
.yinyao3{height:15px;bottom:0px}
.yinleft{background-color:#1b1b1b;height:15px;width:60px;float:left}
.yinright{background-color:#1b1b1b;height:15px;width:60px;float:right}
.box1{opacity: 0.333;}
.box2{transform:rotateZ(315deg) translateY(-333px)}
.box3{transform:rotateZ(45deg) translateY(-333px)}
.box4{transform:rotateZ(0deg) translateY(-333px)}
.box5{transform:rotateZ(270deg) translateY(-333px)}
.box6{transform:rotateZ(90deg) translateY(-333px)}
.box7{transform:rotateZ(225deg) translateY(-333px)}
.box8{transform:rotateZ(180deg) translateY(-333px)}
.box9{transform:rotateZ(135deg) translateY(-333px)}
.one,.two{width:150px;height:300px;position:relative}
.one{background:#1b1b1b;position:absolute;right:0px;border-radius:0 150px 150px 0}
.two{background:#ccc;position:absolute;border-radius:150px 0 0 150px}
.lf,.rf{width:150px;height:150px;border-radius:50%}
.lf{background:#ccc;position:absolute;left:75px}
.rf{background:#1b1b1b;position:absolute;left:75px;top:150px;z-index:2}
.lf_x,.rf_y{width:37.5px;height:37.5px;border-radius:50%}
.lf_x{background:#1b1b1b;position:absolute;left:56.25px;top:56.25px}
.rf_y{background:#ccc;position:absolute;left:56.25px;top:56.25px}
canvas {
  width: 100%;
  height: 100%;
}
@keyframes test {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

span {
    color: red;
    animation: colorbianhuan 2s infinite;
}

.yangyao1,.yangyao2,.yangyao3,.yinleft,.yinright {
  background-color: red;
  animation: colorAnimation 1s infinite;
}
/*.yangyao2 {*/
/*  background-color: red;*/
/*  animation: colorAnimation 10s infinite;*/
/*}*/
/*.yangyao3 {*/
/*  background-color: red;*/
/*  animation: colorAnimation 10s infinite;*/
/*}*/
/*.yinleft {*/
/*  background-color: red;*/
/*  animation: colorAnimation 10s infinite;*/
/*}*/
/*.yinright {*/
/*  background-color: red;*/
/*  animation: colorAnimation 10s infinite;*/
/*}*/


.one ,.rf ,.lf_x {
  background-color: #000000;
  /*animation: colorAnimation 1000s infinite;*/
}
.two ,.lf ,.rf_y {
  background-color: #ff0000;
  /*animation: colorAnimationr 1000s infinite;*/
}

@keyframes colorbianhuan{
0% { color: #ff0000; }
25% { color: #000000; }
50% { color: #ff0000; }
75% { color: #000000; }
100% { color: #ff0000	; } 
}
@keyframes colorAnimation {
  0% { background-color: #ff0000; }
  25% { background-color: #000000; }
  50% { background-color: #ff0000; }
  75% { background-color: #000000; }
  100% { background-color: #ff0000	; }
}
@keyframes colorAnimationr {
  0% { background-color: #000000; }
  25% { background-color: #ff0000; }
  50% { background-color: #000000; }
  75% { background-color: #ff0000; }
  100% { background-color: #000000	; }
}