<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="wrapper"> <div class="pulse"> <span></span> <span></span> <span></span> </div> </div>

body { margin:0; padding:0; overflow:hidden; } .wrapper { height:100vh; -webkit-animation: slide 60s linear infinite; background:url(http://www.ox.ac.uk/sites/files/oxford/styles/ow_medium_feature/public/field/field_image_main/Tarantula%20nebula.jpg?itok=xbyxz9lz) repeat; background-position:120% 100%; background-size:cover; animation:animatebg 60s linear infinite; } .pulse { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:url(https://fallriverchapel.files.wordpress.com/2010/02/gda_world_map_small.jpg); background-size:cover; animation:animateEarth 12s linear infinite; width:200px; height:200px; border-radius:50%; box-shadow:inset 0 0 40px rgba(255,255,255,.5); } .pulse span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:100%; height:100%; border-radius:50%; background:transpatent; border:2px solid #fff; box-sizing:border-box; animation:animate 6s linear infinite; } .pulse span:nth-child(1) { animation-delay:0s; } .pulse span:nth-child(2) { animation-delay:-4s; } .pulse span:nth-child(3) { animation-delay:4s; } @keyframes animate { 0% { width:200px; height:200px; opacity:1; } 50% { opacity:1; } 100% { width:500px; height:500px; opacity:0; } } @keyframes animateEarth { 0% { background-position:0 0; } 100% { background-position:719px 0; } } @keyframes animatebg { 0% { background-position:0 0; } 100% { background-position:719px 0; } }