<div class="box"> <div class="ripple"></div> click! ripple effect </div>
.box { position: relative; width: 200px; height: 44px; line-height: 44px; border: 1px solid #000; text-align: center; overflow: hidden; cursor: default; } .ripple { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; background: rgba(108, 112, 138, 0.5); border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .ripple.animate { animation: ripple 0.65s linear; } @keyframes ripple { 100% { opacity: 0; -webkit-transform: scale(7); -ms-transform: scale(7); transform: scale(7); } }
$('.box').click(function(){ $('.ripple').addClass('animate'); setTimeout(function(){ $('.ripple').removeClass('animate'); }, 650); });