LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
@keyframes run {
  0% {
    top: 5vh;
  }
  100% {
    top: -50vh;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(390deg);
  }
}
body {
  background: #000;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

div {
  height: 5vh;
  overflow: hidden;
}

p {
  margin: 0;
  background: linear-gradient(to bottom, #530 0%, #852 2%, #c67 4%, #ef7 6%, #fff 8%, #fff 10%, #ef7 12%, #c67 14%, #852 16%, #530 18%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 38%, #229 40%, #76e 42%, #aaa 44%, #af9 46%, #fff 48%, #fff 50%, #af9 52%, #aaa 54%, #76e 56%, #229 58%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 78%, #530 80%, #852 82%, #c67 84%, #ef7 86%, #fff 88%, #fff 90%, #ef7 92%, #c67 94%, #852 96%, #530 98%, rgba(0, 0, 0, 0) 100%);
  height: 50vh;
  top: 50vh;
  position: relative;
  animation: run 23s linear infinite;
}

section {
  width: 120vmin;
  height: 120vmin;
  position: relative;
  top: -10vmin;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  animation: rotate 661s linear infinite;
}
section:nth-child(2) {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vmin;
  height: 100vmin;
  margin-left: -50vmin;
  border-radius: 50%;
  overflow: hidden;
  animation-direction: reverse;
  animation-duration: 653s;
}
section:nth-child(2) p {
  animation-direction: reverse;
  animation-duration: 31s;
}

div:nth-child(1) p {
  animation-delay: -0.1666666667s;
}

div:nth-child(2) p {
  animation-delay: -0.3333333333s;
}

div:nth-child(3) p {
  animation-delay: -0.5s;
}

div:nth-child(4) p {
  animation-delay: -0.6666666667s;
}

div:nth-child(5) p {
  animation-delay: -0.8333333333s;
}

div:nth-child(6) p {
  animation-delay: -1s;
}

div:nth-child(7) p {
  animation-delay: -1.1666666667s;
}

div:nth-child(8) p {
  animation-delay: -1.3333333333s;
}

div:nth-child(9) p {
  animation-delay: -1.5s;
}

div:nth-child(10) p {
  animation-delay: -1.6666666667s;
}

div:nth-child(11) p {
  animation-delay: -1.8333333333s;
}

div:nth-child(12) p {
  animation-delay: -2s;
}

div:nth-child(13) p {
  animation-delay: -2.1666666667s;
}

div:nth-child(14) p {
  animation-delay: -2.3333333333s;
}

div:nth-child(15) p {
  animation-delay: -2.5s;
}

div:nth-child(16) p {
  animation-delay: -2.6666666667s;
}

div:nth-child(17) p {
  animation-delay: -2.8333333333s;
}

div:nth-child(18) p {
  animation-delay: -3s;
}

div:nth-child(19) p {
  animation-delay: -3.1666666667s;
}

div:nth-child(20) p {
  animation-delay: -3.3333333333s;
}

div:nth-child(21) p {
  animation-delay: -3.5s;
}

div:nth-child(22) p {
  animation-delay: -3.6666666667s;
}

div:nth-child(23) p {
  animation-delay: -3.8333333333s;
}

div:nth-child(24) p {
  animation-delay: -4s;
}
JS
//NOT

Description

Some op art for fun. Reproducing oldschool c64 raster effects with css gradients and animation, then taking it a bit further.
Term
Sat, 04/14/2018 - 20:50

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv