<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="banner-container"> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <ul class="circles"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="p-5 text-center"> <h1 class="mb-5">Welcome To WebCentCreations</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> </div> </div> </div> </div> </section>

.banner-container{ color: white; border-bottom: #a49dc2; box-shadow: rgb(43, 26, 113) 0px 0px 10px 0px; background: rgb(81, 67, 138); } .circles { position: relative; top: 0; left: 0; } .circles li { position: absolute; list-style: none; display: flex; width: 20px; height: 20px; border-radius: 50%; background: rgba(253, 253, 255, 0.43); animation: animate 25s linear infinite; bottom: -300px; opacity: 0; } .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; border-radius:50%; animation-delay: 0; } .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; border-radius:50%; animation-duration: 12s; animation-delay: 2s; } .circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; border-radius:50%; animation-delay: 4s; } .circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; border-radius:50%; animation-delay: 0s; animation-duration: 18s; } .circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; border-radius:50%; animation-delay: 0s; } .circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; border-radius:50%; animation-delay: 3s; } .circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; border-radius:50%; animation-delay: 7s; } .circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; border-radius:50%; animation-delay: 15s; animation-duration: 45s; } .circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; border-radius:50%; animation-delay: 2s; animation-duration: 35s; } .circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; border-radius:50%; animation-delay: 0s; animation-duration: 12s; } @keyframes animate { 0% { transform: translateY(0) scale(0); opacity: 1; } 100% { transform: translateY(-900px) scale(4); opacity: 0; } }