"Bouncing Ball"
Bootstrap 4.1.1 Snippet by Ritik-Kumar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="main-div"> <ul class="ab"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
*{ margin: 0; padding: 0; box-sizing: border-box; } .main-div{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #000000; } .main-div ul{ display: flex; padding-top: 150px; margin-bottom: 100px; border-bottom: 10px solid #ffffff; border-top: 10px solid #ffffff; } .main-div ul li{ width: 50px; height: 50px; border-radius: 50%; margin: 0 10px; list-style-type: none; animation: bounce 1s linear infinite; } @keyframes bounce{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-150px); } 100%{ transform: translateY(0); } } .main-div ul li:nth-child(1){ animation-delay: .2s; background-color: rgb(241, 15, 211); } .main-div ul li:nth-child(2){ animation-delay: .6s; background-color: rgb(81, 22, 243); } .main-div ul li:nth-child(3){ animation-delay: .4s; background-color: rgb(224, 247, 17); } .main-div ul li:nth-child(4){ animation-delay: .8s; background-color: rgb(133, 10, 235); } .main-div ul li:nth-child(5){ animation-delay: .5s; background-color: rgb(13, 220, 235); }

Related: See More

Navbar With Icons

Questions / Comments: