<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 ----------> <div class="container"> <div class="row"> <div class="main"> <div class="ball"></div> <div class="shadow"></div> </div> </div> </div>

body { margin: 0; padding: 0; background: #0058a5; } .main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ball { position: absolute; width: 150px; height: 150px; background: #c9f364; border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden; animation: animate 1.5s linear infinite; } .ball::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; background: transparent; border: 5px solid #fff; left: -65%; filter: blur(1px); } .ball::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; background: transparent; border: 5px solid #fff; right: -65%; filter: blur(1px); } @keyframes animate { 0% { transform: translate(-50%, -50%) translateY(-200px) rotate(0deg); } 50% { transform: translate(-50%, -50%) translateY(0px) rotate(180deg); } 100% { transform: translate(-50%, -50%) translateY(-200px) rotate(360deg); } } .shadow { position: absolute; width: 150px; height: 50px; transform: translate(-50%, 100%); background: rgba(0, 0, 0, 0.2); border-radius: 50%; z-index: -1; filter: blur(2px); animation: shadow 1.5s linear infinite; } @keyframes shadow { 0% { transform: translate(-50%, 100%) scale(1); } 50% { transform: translate(-50%, 100%) scale(0.5); } 100% { transform: translate(-50%, 100%) scale(1); } }