Motion Lines - codevember - 02 - 2016

In this example below you will see how to do a Motion Lines - codevember - 02 - 2016 with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Motion Lines - codevember - 02 - 2016</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

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

  
</head>

<body>

  <div class="buttons">

  <div class="bar pink">
    <div class="line"></div>
    <div class="ball"> 
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>

  <div class="bar yellow">
    <div class="line"></div>
    <div class="ball">
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>

  <div class="bar blue">
    <div class="line"></div>
    <div class="ball">
  <!--     <span class="icon">icon</span> -->
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/caiocares/motion-lines-codevember-02-2016-aBbaYZ */
body {
  background: #202020;
}

.buttons {
  position: relative;
  width: 300px;
  left: 50%;
  top: 50%;
  margin: 0 0 0 -150px;
}

.bar {
  position: relative;
  top: 300px;
  left: 30px;
  width: 100px;
  height: 200px;
  float: left;
}
.bar .line {
  width: 4px;
  height: 0px;
  border-radius: 5%;
  margin: 0px 0 0 25px;
  float: left;
}
.bar .ball {
  border-width: 4px;
  border-style: solid;
  border-radius: 100%;
  background: white;
  width: 50px;
  height: 50px;
  transform: scale(0);
  animation: growBall 0.3s 0.5s 1 forwards cubic-bezier(0.79, 0.1, 0.23, 1);
  margin: -25px 0 0 0;
}

.pink .line {
  background: #f36a6a;
  animation: growBarTop 0.6s 0.3s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBarTop 0.6s 0.4s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
  position: relative;
  margin-top: -200px;
}
.pink .ball {
  border-color: #f36a6a;
}

.yellow .line {
  background: #ffc32c;
  animation: growBar 0.6s 0.1s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBar 0.6s 0.2s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
}
.yellow .ball {
  border-color: #ffc32c;
}

.blue .line {
  background: #4bdcef;
  animation: growBarTop 0.6s 0.5s 1 forwards cubic-bezier(0.05, 0.54, 0.25, 1), decreaseBarTop 0.6s 0.6s 1 forwards cubic-bezier(0.78, 0.01, 1, 0.7);
  position: relative;
  margin-top: -200px;
}
.blue .ball {
  border-color: #4bdcef;
}

@keyframes growBar {
  0% {
    height: 0;
    position: absolute;
    bottom: 0;
  }
  100% {
    height: 200px;
    position: absolute;
    bottom: 0;
  }
}
@keyframes decreaseBar {
  0% {
    height: 200px;
    position: absolute;
    top: 0;
  }
  100% {
    height: 0px;
    position: absolute;
    top: 0;
  }
}
@keyframes growBarTop {
  0% {
    height: 0;
    position: absolute;
    top: 0;
  }
  100% {
    height: 200px;
    position: absolute;
    top: 0;
  }
}
@keyframes decreaseBarTop {
  0% {
    height: 200px;
    position: absolute;
    bottom: 0;
  }
  100% {
    height: 0px;
    position: absolute;
    bottom: 0;
    margin-top: 0;
  }
}
@keyframes growBall {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

Comments