A Pen by Carl Boneri

Thumbnail
This awesome code was written by CarlBoneri, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CarlBoneri ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Carl Boneri</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/CarlBoneri/a-pen-by-carl-boneri-dmjpYj */
html,
body {
  height: 100%;
  background-color: #2f2933;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

div, div:before, div:after {
  width: 100px;
  height: 20px;
  background: #29d9c2;
  position: relative;
  transform: translate(-110px, 50px);
  box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #29d9c2, 0 -90px 0 #29d9c2, 0 -120px 0 #29d9c2;
  animation-name: bar1;
  animation-duration: 0.3s;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
div:before {
  content: "";
  position: absolute;
  transform: translate(110px, 0);
  box-shadow: 0 -30px 0 #29d9c2;
  animation-name: bar2;
}
div:after {
  content: "";
  position: absolute;
  transform: translate(220px, 0);
  box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #29d9c2, 0 -90px 0 #29d9c2;
  animation-name: bar3;
}

@keyframes bar1 {
  0%,
  19.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a, 0 -120px 0 #ff3b77;
  }
  20%,
  39.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a;
  }
  40%,
  59.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d;
  }
  60%,
  79.9% {
    box-shadow: 0 -30px 0 #29d9c2;
  }
  80%,
  100% {
    box-shadow: none;
  }
}
@keyframes bar2 {
  0%,
  19.9% {
    box-shadow: none;
  }
  20%,
  39.9% {
    box-shadow: 0 -30px 0 #29d9c2;
  }
  40%,
  59.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d;
  }
  60%,
  79.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a, 0 -120px 0 #ff3b77;
  }
  80%,
  100% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a;
  }
}
@keyframes bar3 {
  0%,
  19.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d;
  }
  20%,
  39.9% {
    box-shadow: 0 -30px 0 #29d9c2;
  }
  40%,
  59.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d;
  }
  60%,
  79.9% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a;
  }
  80%,
  100% {
    box-shadow: 0 -30px 0 #29d9c2, 0 -60px 0 #948a9d, 0 -90px 0 #ca638a, 0 -120px 0 #ff3b77;
  }
}

Comments