代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500); html { background-color: #eeedef; } #container { position: absolute; top: 50%; left: 50%; margin-right: -50%; opacity: 0.9; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .paper { background-color: #fffeff; 500px; height: 100px; overflow: hidden; position: relative; margin-bottom: 16px; box-shadow: 0px 1px 2px 1px #d3d2d3; border-radius: 2px; transition: 0.1s ease-in; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .paper:hover { cursor: pointer; } #num { font-family: 'Roboto', sans-serif; font-size: 28px; color: #999; text-align: center; margin-top: 32px; } .ripple { background-color: rgba(0, 0, 0, 0.45); border-radius: 100%; height: 100px; 100px; margin-top: -90px; position: relative; -webkit-transform: scale(0); transform: scale(0); } .animate { -webkit-animation: ripple 0.4s linear; animation: ripple 0.4s linear; } @-webkit-keyframes ripple { 100% { -webkit-transform: scale(12); transform: scale(12); background-color: transparent; } } @keyframes ripple { 100% { -webkit-transform: scale(12); transform: scale(12); background-color: transparent; } } </style> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function() { $(".paper").mousedown(function(e) { var ripple = $(this).find(".ripple"); ripple.removeClass("animate"); var x = parseInt(e.pageX - $(this).offset().left) - (ripple.width() / 2); var y = parseInt(e.pageY - $(this).offset().top) - (ripple.height() / 2); ripple.css({ top: y, left: x }).addClass("animate"); }); }); </script> </head> <body> <div id="container"> <div class="paper"> <p id="num">1</p> <div class="ripple"></div> </div> </div> </body> </html>
效果如下图：
