Infinite squares

In this example below you will see how to do a Infinite squares with some HTML / CSS and Javascript

I started building it the other way, but looks better this way

Thumbnail
This awesome code was written by z-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright z- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Infinite squares</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .main {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  animation:rot 6s linear infinite;
}
.main div {
  position: absolute;
  top:0px;
  left:0px;
  width:40px;
  height:40px;
  background-color:#8e44ad;
  animation-direction: reverse;
}
.st {
  animation:fade 4s linear infinite;
}
.main .t{
  top:0px;
}
.main .rm{
  top:40px;
}
.main .b{
  top:80px;
}
.main .l{
  left:0px;
}
.main .m{
  left:40px;
}
.main .r{
  left:80px;
}


.mm {
  background-color:#8e44ad;
  position: absolute;
  top:60px !important;
  left:60px !important;
  transform:translate(-50%,-50%) !important;/**/
  animation:main 2s linear infinite;
}
.tl {
  animation:fadetl 2s linear infinite;
  border-top-left-radius:20px;
}
.tm {
  animation:fadetm 2s linear infinite;
}
.tr {
  animation:fadetr 2s linear infinite;
  border-top-right-radius:20px;
}
.ml {
  animation:fademl 2s linear infinite;
}
.mr {
  animation:fademr 2s linear infinite;
}
.bl {
  animation:fadebl 2s linear infinite;
  border-bottom-left-radius:20px;
}
.bm {
  animation:fadebm 2s linear infinite;
}
.br {
  animation:fadebr 2s linear infinite;
  border-bottom-right-radius:20px;
}
@keyframes rot {
  0%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}
@keyframes main {
  0% {
    width:40px;
    height:40px;
    border-radius:0px;
  }
  10% {
    border-radius:0px;
  }
  100% {
    width:120px;
    height:120px;
    border-radius:20px;
  }
}
@keyframes fadetl {
  0% {
    opacity:1;
    top:0px;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:-80px;
    left:-80px;
  }
}
@keyframes fadetm {
  0% {
    opacity:1;
    top:0px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    top:-80px;
  }
}
@keyframes fadetr {
  0% {
    opacity:1;
    top:0px;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:-80px;
    left:160px;
  }
}
@keyframes fademl {
  0% {
    opacity:1;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    left:-80px;
  }
}
@keyframes fademr {
  0% {
    opacity:1;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    left:160px;
  }
}
@keyframes fadebl {
  0% {
    opacity:1;
    top:80px;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:160px;
    left:-80px;
  }
}
@keyframes fadebm {
  0% {
    opacity:1;
    top:80px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    top:160px;
  }
}
@keyframes fadebr {
  0% {
    opacity:1;
    top:80px;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:160px;
    left:160px;
  }
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="main">
  <div class="st tl t l"></div>
  <div class="st tm t m"></div>
  <div class="st tr t r"></div>
  <div class="st ml rm l"></div>
  <div class="mm rm m"></div>
  <div class="st mr rm r"></div>
  <div class="st bl b l"></div>
  <div class="st bm b m"></div>
  <div class="st br b r"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dev.finnthewebdesigner.com/pentitle.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/z-/infinite-squares-pJjOGW */
.main {
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:120px;
  height:120px;
  animation:rot 6s linear infinite;
}
.main div {
  position: absolute;
  top:0px;
  left:0px;
  width:40px;
  height:40px;
  background-color:#8e44ad;
  animation-direction: reverse;
}
.st {
  animation:fade 4s linear infinite;
}
.main .t{
  top:0px;
}
.main .rm{
  top:40px;
}
.main .b{
  top:80px;
}
.main .l{
  left:0px;
}
.main .m{
  left:40px;
}
.main .r{
  left:80px;
}


.mm {
  background-color:#8e44ad;
  position: absolute;
  top:60px !important;
  left:60px !important;
  transform:translate(-50%,-50%) !important;/**/
  animation:main 2s linear infinite;
}
.tl {
  animation:fadetl 2s linear infinite;
  border-top-left-radius:20px;
}
.tm {
  animation:fadetm 2s linear infinite;
}
.tr {
  animation:fadetr 2s linear infinite;
  border-top-right-radius:20px;
}
.ml {
  animation:fademl 2s linear infinite;
}
.mr {
  animation:fademr 2s linear infinite;
}
.bl {
  animation:fadebl 2s linear infinite;
  border-bottom-left-radius:20px;
}
.bm {
  animation:fadebm 2s linear infinite;
}
.br {
  animation:fadebr 2s linear infinite;
  border-bottom-right-radius:20px;
}
@keyframes rot {
  0%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}
@keyframes main {
  0% {
    width:40px;
    height:40px;
    border-radius:0px;
  }
  10% {
    border-radius:0px;
  }
  100% {
    width:120px;
    height:120px;
    border-radius:20px;
  }
}
@keyframes fadetl {
  0% {
    opacity:1;
    top:0px;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:-80px;
    left:-80px;
  }
}
@keyframes fadetm {
  0% {
    opacity:1;
    top:0px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    top:-80px;
  }
}
@keyframes fadetr {
  0% {
    opacity:1;
    top:0px;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:-80px;
    left:160px;
  }
}
@keyframes fademl {
  0% {
    opacity:1;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    left:-80px;
  }
}
@keyframes fademr {
  0% {
    opacity:1;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    left:160px;
  }
}
@keyframes fadebl {
  0% {
    opacity:1;
    top:80px;
    left:0px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:160px;
    left:-80px;
  }
}
@keyframes fadebm {
  0% {
    opacity:1;
    top:80px;
  }
  10% {
    opacity:1;
  }
  80%,100% {
    opacity:0;
    top:160px;
  }
}
@keyframes fadebr {
  0% {
    opacity:1;
    top:80px;
    left:80px;
  }
  10% {
    opacity:1;
  }
  80% {
    opacity:0;
  }
  90%,100% {
    opacity:0;
    top:160px;
    left:160px;
  }
}

Comments