Loading

Ehh - Building Block

Someday I'll make it into this https://pbs.twimg.com/tweet_video/CMFf_sHWUAE_JmM.mp4

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Ehh - Building Block</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- /reflect in haml -->
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
<div class='thing'></div>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
body {
  overflow: hidden;
}

.thing {
  box-sizing: border-box;
  position: absolute;
  -webkit-animation: change 1s linear infinite alternate;
          animation: change 1s linear infinite alternate;
  left: 50vw;
  top: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}
.thing:nth-of-type(1) {
  height: 5vh;
  width: 5vw;
  margin: -2.5vh -2.5vw;
  -webkit-animation-delay: 0.05s;
          animation-delay: 0.05s;
  z-index: -1;
}
.thing:nth-of-type(2) {
  height: 10vh;
  width: 10vw;
  margin: -5vh -5vw;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  z-index: -2;
}
.thing:nth-of-type(3) {
  height: 15vh;
  width: 15vw;
  margin: -7.5vh -7.5vw;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  z-index: -3;
}
.thing:nth-of-type(4) {
  height: 20vh;
  width: 20vw;
  margin: -10vh -10vw;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  z-index: -4;
}
.thing:nth-of-type(5) {
  height: 25vh;
  width: 25vw;
  margin: -12.5vh -12.5vw;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  z-index: -5;
}
.thing:nth-of-type(6) {
  height: 30vh;
  width: 30vw;
  margin: -15vh -15vw;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  z-index: -6;
}
.thing:nth-of-type(7) {
  height: 35vh;
  width: 35vw;
  margin: -17.5vh -17.5vw;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
  z-index: -7;
}
.thing:nth-of-type(8) {
  height: 40vh;
  width: 40vw;
  margin: -20vh -20vw;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  z-index: -8;
}
.thing:nth-of-type(9) {
  height: 45vh;
  width: 45vw;
  margin: -22.5vh -22.5vw;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  z-index: -9;
}
.thing:nth-of-type(10) {
  height: 50vh;
  width: 50vw;
  margin: -25vh -25vw;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  z-index: -10;
}
.thing:nth-of-type(11) {
  height: 55vh;
  width: 55vw;
  margin: -27.5vh -27.5vw;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
  z-index: -11;
}
.thing:nth-of-type(12) {
  height: 60vh;
  width: 60vw;
  margin: -30vh -30vw;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  z-index: -12;
}
.thing:nth-of-type(13) {
  height: 65vh;
  width: 65vw;
  margin: -32.5vh -32.5vw;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  z-index: -13;
}
.thing:nth-of-type(14) {
  height: 70vh;
  width: 70vw;
  margin: -35vh -35vw;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  z-index: -14;
}
.thing:nth-of-type(15) {
  height: 75vh;
  width: 75vw;
  margin: -37.5vh -37.5vw;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  z-index: -15;
}
.thing:nth-of-type(16) {
  height: 80vh;
  width: 80vw;
  margin: -40vh -40vw;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  z-index: -16;
}
.thing:nth-of-type(17) {
  height: 85vh;
  width: 85vw;
  margin: -42.5vh -42.5vw;
  -webkit-animation-delay: 0.85s;
          animation-delay: 0.85s;
  z-index: -17;
}
.thing:nth-of-type(18) {
  height: 90vh;
  width: 90vw;
  margin: -45vh -45vw;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  z-index: -18;
}
.thing:nth-of-type(19) {
  height: 95vh;
  width: 95vw;
  margin: -47.5vh -47.5vw;
  -webkit-animation-delay: 0.95s;
          animation-delay: 0.95s;
  z-index: -19;
}
.thing:nth-of-type(20) {
  height: 100vh;
  width: 100vw;
  margin: -50vh -50vw;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  z-index: -20;
}

@-webkit-keyframes change {
  0% {
    border-radius: 0;
    border: 2px solid white;
    top: 0;
  }
  50% {
    border-radius: 100%;
    background: rgba(31, 5, 6, 0.717);
  }
  100% {
    background: white;
    border: 4px dotted white;
  }
}

@keyframes change {
  0% {
    border-radius: 0;
    border: 2px solid white;
    top: 0;
  }
  50% {
    border-radius: 100%;
    background: rgba(31, 5, 6, 0.717);
  }
  100% {
    background: white;
    border: 4px dotted white;
  }
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by 717, you can se more from this user in the personal repository

717
717
717
Rating 3.00 average based on 0 ratings.
2 Downloads
55 Views
3.00 Rating
PREVIEW Open demo in external page
Download File Size: 2.64 KB
Open Original Open on codepen.io