"ripple effects"
Bootstrap 4.1.1 Snippet by csshint

<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="wrapper"> <div class="ripple_circle"> <div id="ripple"></div> <div id="ripple2"></div> <div id="ripple3"></div> </div> </div> </div>
body{ background: -webkit-gradient(linear,left top,right top,from(#A34FFE),to(#5934FC)); } .wrapper { overflow: hidden; width: 400px; height: 400px; background-color: #FFF; border-radius: 100%; margin: 50px auto; } .ripple_circle{ z-index: 1; position: relative; width: 340px; height: 340px; background: -webkit-radial-gradient(circle,#FDC800,#FF4137); background: -moz-radial-gradient(circle,#FDC800,#FF4137); background: -o-radial-gradient(circle,#FDC800,#FF4137); background: radial-gradient(circle,#FDC800,#FF4137); top: 30px; left: 30px; border-radius: 100%; -webkit-box-shadow: -2px 3px 26px 0 #FF4137; box-shadow: -2px 3px 26px 0 #FF4137; } #ripple, #ripple2, #ripple3 { border-radius: 9999px; border: 1px solid rgba(255,255,255,.4); -webkit-box-shadow: 0 0 20px rgba(255,255,255,.4); box-shadow: 0 0 20px rgba(255,255,255,.4); position: absolute; bottom: 50%; margin-bottom: -326px; right: 50%; margin-right: -326px; -webkit-animation: shrink 5s linear infinite; -moz-animation: shrink 5s linear infinite; -o-animation: shrink 5s linear infinite; animation: shrink 5s linear infinite; z-index: 0; background: rgba(255,255,255,.4); } #ripple { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } #ripple2 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } #ripple3 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes shrink { 0% { margin-bottom: 0; margin-right: 0; width: 0; height: 0; opacity: 0 } 10% { opacity: .5 } 30% { opacity: .3 } 60% { opacity: 0 } 100% { margin-bottom: -326px; margin-right: -326px; width: 650px; height: 650px; opacity: 0 } } @-moz-keyframes shrink { 0% { margin-bottom: 0; margin-right: 0; width: 0; height: 0; opacity: 0 } 10% { opacity: .5 } 30% { opacity: .3 } 60% { opacity: 0 } 100% { margin-bottom: -326px; margin-right: -326px; width: 650px; height: 650px; opacity: 0 } } @-o-keyframes shrink { 0% { margin-bottom: 0; margin-right: 0; width: 0; height: 0; opacity: 0 } 10% { opacity: .5 } 30% { opacity: .3 } 60% { opacity: 0 } 100% { margin-bottom: -326px; margin-right: -326px; width: 650px; height: 650px; opacity: 0 } } @keyframes shrink { 0% { margin-bottom: 0; margin-right: 0; width: 0; height: 0; opacity: 0 } 10% { opacity: .5 } 30% { opacity: .3 } 60% { opacity: 0 } 100% { margin-bottom: -326px; margin-right: -326px; width: 650px; height: 650px; opacity: 0 } }

Related: See More


Questions / Comments: