A Pen by Jennifer Kirchner

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jennifer Kirchner</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

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

  
</head>

<body>

  
<div class="zoom zoom-1"></div>
<div class="zoom zoom-2"></div>
<div class="zoom zoom-3"></div>
<div class="zoom zoom-4"></div>
<div class="zoom zoom-5"></div>
<div class="zoom zoom-6"></div>
<div class="zoom zoom-7"></div>
<div class="zoom zoom-8"></div>
<div class="zoom zoom-9"></div>
<div class="zoom zoom-10"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jennifer-elyse/a-pen-by-jennifer-kirchner-qPMyxQ */
body {
  background: #fff;
}

.zoom {
  position: absolute;
  width: 50%;
  height: 5%;
  border-radius: 65px;
  mix-blend-mode: multiply;
}

.zoom-1 {
  top: 40%;
  left: 0;
  background-color: #18C9FF;
  -webkit-animation: zoom-left 5s ease-in-out infinite;
          animation: zoom-left 5s ease-in-out infinite;
}

.zoom-2 {
  top: 40%;
  right: 0;
  background-color: #EC0868;
  -webkit-animation: zoom-right 5s ease-in-out infinite;
          animation: zoom-right 5s ease-in-out infinite;
}

.zoom-3 {
  top: 50%;
  left: 0;
  background-color: #FAC05E;
  -webkit-animation: zoom-left 6s ease-in-out infinite;
          animation: zoom-left 6s ease-in-out infinite;
}

.zoom-4 {
  top: 50%;
  right: 0;
  background-color: #59CD90;
  -webkit-animation: zoom-right 6s ease-in-out infinite;
          animation: zoom-right 6s ease-in-out infinite;
}

.zoom-5 {
  top: 60%;
  left: 0;
  background-color: #EE6352;
  -webkit-animation: zoom-left 5s ease-in-out infinite;
          animation: zoom-left 5s ease-in-out infinite;
}

.zoom-6 {
  top: 60%;
  right: 0;
  background-color: #FF5A5F;
  -webkit-animation: zoom-right 5s ease-in-out infinite;
          animation: zoom-right 5s ease-in-out infinite;
}

.zoom-7 {
  top: 70%;
  left: 0;
  background-color: #C2E812;
  -webkit-animation: zoom-left 6s ease-in-out infinite;
          animation: zoom-left 6s ease-in-out infinite;
}

.zoom-8 {
  top: 70%;
  right: 0;
  background-color: #00A6A6;
  -webkit-animation: zoom-right 6s ease-in-out infinite;
          animation: zoom-right 6s ease-in-out infinite;
}

.zoom-9 {
  top: 80%;
  left: 0;
  background-color: #a0366f;
  -webkit-animation: zoom-left 5s ease-in-out infinite;
          animation: zoom-left 5s ease-in-out infinite;
}

.zoom-10 {
  top: 80%;
  right: 0;
  background-color: #847dc4;
  -webkit-animation: zoom-right 5s ease-in-out infinite;
          animation: zoom-right 5s ease-in-out infinite;
}

@-webkit-keyframes zoom-left {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}

@keyframes zoom-left {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@-webkit-keyframes zoom-right {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
}
@keyframes zoom-right {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
  }
}

Comments