Motion Lines - codevember - 02 - 2016

What is a motion lines - codevember - 02 - 2016 How do you make a motion lines - codevember - 02 - 2016? This script and codes were developed by Caio Cares on 26 March 2022, Saturday.

How do I make an motion lines - codevember - 02 - 2016?
  1. Motion Lines - codevember - 02 - 2016 Previews
  2. Motion Lines - codevember - 02 - 2016 HTML Codes
  3. Motion Lines - codevember - 02 - 2016 CSS Codes
Motion Lines - codevember - 02 - 2016 Previews

Motion Lines - codevember - 02 - 2016 HTML Codes

<!DOCTYPE html>
<html >
<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>

Motion Lines - codevember - 02 - 2016 CSS Codes

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);
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.