水波按钮效果

分享一个在网页中常见的按钮效果：水波按钮。
实现主要要掌握：
（1）CSS3的动画：transform属性里的 scale(x,y) 2D缩放转换;
（2）jQuery 事件 - pageX /pageY属性;（鼠标指针的位置，相对于文档的边缘。）
（3）jQuery CSS 操作 - offset() 方法；
（3）jQuery 文档操作 : append() 方法;
（4）animationend 事件 （在 CSS 动画结束后为元素添加监听事件:）
附上源代码：
先是HTML部分：

<div href="#" class="btn">GOOGLE 按钮</div>

然后是CSS部分：

<style>        body{ background: #000; }        .btn{ width: 200px; height: 50px; line-height: 50px; background: #333; color: #fff; font-size: 16px; position: relative; text-align: center; overflow: hidden; }        .box{ width: 4px; height: 4px; background: #fff; position: absolute;  border-radius: 50%; animation: mybtn 1s ; opacity: 0; transform:scale(100); }        @keyframes mybtn{            from{                opacity: 0.5;                transform:scale(0);            }            }            to{                opacity: 0;                transform:scale(100);            }        }    </style>

最后JS部分（记得先引入Jquery插件）：

$(function(){            $('.btn').on('mousedown',function(e){                var ball = $('<span class="box"></span>');                var left=e.pageX-$('.btn').offset().left;                var top=e.pageY-$('.btn').offset().top;                ball.css({'left':left,'top':top});                $('.btn').append( ball );                ball.on('animationend',function(){                    ball.remove();                });   //每次在执行完动画把“水波”从文档中移出；            });        });

                感谢阅读

---