.circle {
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  animation-direction: alternate;
}
.circle:after {
  content: '';
  background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 100%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#33ffffff', GradientType=1);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.circle.sunset {
  width: 50px;
  height: 50px;
  top: -50px;
  background: #8be9df;
  animation: orb1 86s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
  opacity: 0.3;
}
.circle.coolice {
  background: #7cb1eb;
  width: 60px;
  height: 60px;
  top: -60px;
  animation: orb2 66s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
  opacity: 0.3;
}
.circle.timber {
  background: url(../images/sanjiao2.png) center center no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  width: 30px;
  height: 30px;
  top: -30px;
  animation: orb3 43s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
  opacity: 0.1;
}
.circle.pig {
  background: #ffba6b;
  width: 40px;
  height: 40px;
  top: -40px;
  animation: orb4 32s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
  opacity: 0.3;
}
.circle.friday {
  background: url(../images/sanjiao.png) center center no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  width: 4.5730166vh;
  height: 4.5730166vh;
  top: -4.5730166vh;
  animation: orb5 44s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
  opacity: 0.2;
}
@keyframes orb1 {
  0% {
	transform: translatey(100vh) translatex(0vw);
  }
  100% {
	transform: translatey(14.61170804vh) translatex(80vw);
  }
}
@keyframes orb2 {
  0% {
	transform: translatey(0vh) translatex(60vw);
  }
  100% {
	transform: translatey(73vh) translatex(96vw);
  }
}
@keyframes orb3 {
  0% {
	transform: translatey(70vh) translatex(50vw);
  }
  100% {
	transform: translatey(30vh) translatex(30vw);
  }
}
@keyframes orb4 {
  0% {
	transform: translatey(50vh) translatex(10vw);
  }
  100% {
	transform: translatey(79.19494351vh) translatex(1.58445831vw);
  }
}
@keyframes orb5 {
  0% {
	transform: translatey(30vh) translatex(62vw);
  }
  100% {
	transform: translatey(20vh) translatex(90vw);
  }
}
.headercontent {
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: -1;
}