EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent 100%);
  background-size: 10px 10px;
  background-color: #d68d2f;
  padding-top: 50px;
}
.halo {
  position: absolute;
  top: 50%;
  left: 50%;
}
.halo:before,
.halo:after {
  content: '';
  display: block;
  position: absolute;
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  border-radius: 240px;
  animation-name: Grow;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: Grow;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.halo:before {
  box-shadow: 0px 0px 100px 10px rgba(150, 42, 0, 0.8);
}
.halo:after {
  box-shadow: inset 0px 0px 100px 10px rgba(150, 42, 0, 0.8);
}
@-webkit-keyframes Grow {
  0% {
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    /* Safari and Chrome */
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    /* Safari and Chrome */
    opacity: 0;
  }
}
.container {
  position: relative;
  width: 50%;
  max-width: 400px;
  margin: 100px auto 100px;
  background: none;
}
.constant {
  position: relative;
  width: 100%;
}
.constant .heightHandle {
  position: absolute;
  display: block;
  width: 100%;
  padding-top: 100%;
}
.circle-main,
.circle-main:before,
.circle-main:after,
.circle-main2,
.circle-main2:before,
.circle-main2:after,
.circle-main3,
.circle-main3:before,
.circle-main3:after,
.circle-main4,
.circle-main4:before,
.circle-main4:after,
.circle-main5,
.circle-main5:before,
.circle-main5:after,
.circle-inner:before,
.circle-inner,
.circle-travel,
.circle-travel:before,
.circle-travel:after {
  box-shadow: inset 0 0 0 1px rgba(150, 42, 0, 0.5), inset 0 0 10px 2px rgba(150, 42, 0, 0.25);
}
.electrons span {
  box-shadow: 0 0 0 1px rgba(250, 216, 109, 0.5);
  background: rgba(250, 216, 109, 0.1);
}
.crosshair {
  background: rgba(150, 42, 0, 0.8);
}
.circle-main {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.circle-main:before,
.circle-main:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main2 {
  position: absolute;
  top: 0;
  left: 37.5%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
}
.circle-main2:before,
.circle-main2:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main2:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main2:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main3 {
  position: absolute;
  bottom: 0;
  left: 37.5%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
}
.circle-main3:before,
.circle-main3:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main3:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main3:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main4 {
  position: absolute;
  top: 37.5%;
  left: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
}
.circle-main4:before,
.circle-main4:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main4:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main4:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main5 {
  position: absolute;
  top: 37.5%;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
}
.circle-main5:before,
.circle-main5:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main5:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main5:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-inner {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  -webkit-animation: spin 6s linear infinite;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 10%, transparent 10%, transparent 100%);
}
.circle-inner:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  top: 25%;
  left: 50%;
}
.circle-travel {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: -50%;
  -webkit-animation: spin 3s linear infinite reverse;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 7%, transparent 7%, transparent 100%);
}
.circle-travel:before,
.circle-travel:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 35%, transparent 35%, transparent 100%);
}
.circle-travel:before {
  left: -5px;
}
.circle-travel:after {
  right: -5px;
}
.circle-travel {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: -50%;
  -webkit-animation: spin 3s linear infinite reverse;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 7%, transparent 7%, transparent 100%);
}
.circle-travel:before,
.circle-travel:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 35%, transparent 35%, transparent 100%);
}
.circle-travel:before {
  left: -5px;
}
.circle-travel:after {
  right: -5px;
}
.crosshair {
  position: absolute;
  background-clip: content-box !important;
  border-radius: 1px;
}
.crosshair:nth-child(1) {
  width: 200%;
  height: 2px;
  margin-top: -1px;
  top: 50%;
  left: -50%;
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.crosshair:nth-child(1):before,
.crosshair:nth-child(1):after {
  top: -2px;
  border-top: solid 3px transparent;
  border-bottom: solid 3px transparent;
}
.crosshair:nth-child(1):before {
  left: -8px;
  border-right: solid 6px rgba(150, 42, 0, 0.8);
}
.crosshair:nth-child(1):after {
  right: -8px;
  border-left: solid 6px rgba(150, 42, 0, 0.8);
}
.crosshair:nth-child(2) {
  height: 200%;
  width: 2px;
  margin-left: -1px;
  top: -50%;
  left: 50%;
  border-top: solid 8px transparent;
  border-bottom: solid 8px transparent;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.crosshair:nth-child(2):before,
.crosshair:nth-child(2):after {
  left: -2px;
  border-left: solid 3px transparent;
  border-right: solid 3px transparent;
}
.crosshair:nth-child(2):before {
  top: -8px;
  border-bottom: solid 6px rgba(150, 42, 0, 0.8);
}
.crosshair:nth-child(2):after {
  bottom: -8px;
  border-top: solid 6px rgba(150, 42, 0, 0.8);
}
.crosshair:before,
.crosshair:after {
  content: "";
  position: absolute;
}
.electrons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: none !important;
  box-shadow: none !important;
}
.electrons span {
  position: absolute;
  width: 150%;
  height: 50%;
  left: -25%;
  top: 25%;
  border-radius: 50%;
}
.electrons span:nth-child(2) {
  -webkit-transform: rotate(45deg);
}
.electrons span:nth-child(3) {
  -webkit-transform: rotate(90deg);
}
.electrons span:nth-child(4) {
  -webkit-transform: rotate(-45deg);
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

HTML

Recommendation

Join Effecthub.com