body {
  background: #111;
}

.halo {
  transition: .4s all;
}
.halo.input {
  width: 100px;
  height: 100px;
}
.halo.input:before {
  width: 100px;
  height: 100px;
}

.ring-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}
.ring-1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate;
}
.ring-2:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 4s infinite alternate;
}
.ring-3:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 7s infinite alternate-reverse;
}
.ring-4:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-5:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-6 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 2s infinite alternate-reverse;
}
.ring-6:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-7 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate-2 5s infinite alternate;
}
.ring-7:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1), 0 0 50px rgba(0, 255, 255, 0.1), inset 0 0 20px rgba(0, 255, 255, 0.1), inset 0 0 50px rgba(0, 255, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

.ring-8 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  border-radius: 100%;
  width: 200px;
  height: 200px;
  -webkit-transform: scale(1);
  -webkit-animation: rotate 10s infinite alternate-reverse;
}
.ring-8:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid rgba(255, 0, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.1), 0 0 50px rgba(255, 0, 255, 0.1), inset 0 0 20px rgba(255, 0, 255, 0.1), inset 0 0 50px rgba(255, 0, 255, 0.1);
  -webkit-animation: rotate 3.5s infinite alternate-reverse;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(360deg) scaleX(1);
  }
  100% {
    -webkit-transform: rotate(0deg) scaleX(1.1);
  }
}
@-webkit-keyframes rotate-2 {
  0% {
    -webkit-transform: rotate(360deg) scaleX(0.9);
  }
  100% {
    -webkit-transform: rotate(90deg) scaleX(1.1);
  }
}